Recap

todo Add the most crucial summarized thing to let us recap this topic

Playground

….

Used in Projects

One Word (main)

Getting Started

stale-while-revalidate caching ????

Anatomy

Every query requires two things:

1. A query key - a unique identifier - formed by an array of strings.
2. A query function. This function needs to be a Promise. It doesn’t have to fetch data but it needs to be a Promise.

Query Keys

React query will keep track of all items for the given array. If any of them change, React Query will invalidate the cache , call the given query function again and, store the result in the cache again!

So, we should defintely keep this in mind:

If some state is related to the query function, then it should be places inside the query key’s array!

The Key Array order matters!

1// Query One placed on one.tsx
2const { data: dataOne } = useQuery({
3  queryKey: ["array-keys", active, id],
4  queryFn: fetchDynamicUser(id, active),
5});
6
7// Query Two placed on two.tsx
8const user = useQuery({
9  queryKey: ["array-keys", id, active],
10  queryFn: () => fetchDynamicUser(id, active),
11});

When active is true, will have two entries on the cache with different key values that have the same data

1. ['array-keys', true, null] → // Query One
2. ['array-keys', null, true] → // Query Two

Even though the result of fetchDynamicUser is the same, the cache will place this result in two different places: inside a key with value of ['array-keys', true, null] inside a key with a value of ['array-keys', null, true]

In an App, we likely face a scenario where multiple pages or components will use the same data. But by changing the array order we may start creating lots of entries on React Query Cache. We don’t need that.

Real Example:

We’re watching three variations: 1) status and id are null. 2)status is active and id is null 3) status is active and id is ‘1’. We have on entry for each variation

With the “order” approach we would have “duplicated” entries.

Lifecycle

status

This prop represents the STATUS OF THE QUERY. It's based on the Promise's status. They're not the same, but pretty similar.

status === "pending" (on Promise language this is "Pending")

It means that query has not yet completed.

status === "success" (on Promise language this is "Fulfilled")

It means that query has completed successfully and data is available.

status === "error" (on Promise language this is "Rejected")

It means that query has completed with an error.

• asdsada sdasdsa asdsadsa

  1const usersQuery = useQuery({
  2  queryKey: ["users"],
  3  queryFn: fetchUsers,
  4});
  

Argumentation / Debates

This section groups tips and explanations so I can argue about React Query with the most accurate knowledge possible.

FAQ

About too much Rendering/re-renders

Infinte loops

Scenario 1

If we have more than one component that uses the same query, at least one of them should be responsible for fetching the data. This is the job of the enable property. Example:

screen.tsx

1const Screen = () => {
2  return (
3    <div>
4      <ComponentOne />
5      <ComponentTwo />
6    </div>
7  );
8};
9
10const ComponentOne = () => {
11  const { data } = useQuery({
12    queryKey: ["users"],
13    queryFn: fetchUsers,
14    enable: true,
15  });
16  return <div>{data}</div>;
17};
18
19const ComponentTwo = () => {
20  const { data } = useQuery({
21    queryKey: ["users"],
22    queryFn: fetchUsers,
23    enable: false,
24  });
25  return <div>{data}</div>;
26};

Scenario 2

If we have a query that depends on a state that changes on the query function, we may end up with an infinite loop. This is because the query function will be called every time the state changes, and the state changes every time the query function is called. ...