You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The example contains at least one inacurate statement,
> It will then cache the data using `'todos'` and `fetchTodos` as the unique identifiers for that cache.
and could benefit from more precise language.
Copy file name to clipboardExpand all lines: docs/src/pages/guides/caching.md
+9-8
Original file line number
Diff line number
Diff line change
@@ -17,16 +17,17 @@ This caching example illustrates the story and lifecycle of:
17
17
Let's assume we are using the default `cacheTime` of **5 minutes** and the default `staleTime` of `0`.
18
18
19
19
- A new instance of `useQuery('todos', fetchTodos)` mounts.
20
-
- Since no other queries have been made with this query + variable combination, this query will show a hard loading state and make a network request to fetch the data.
21
-
-It will then cache the data using `'todos'`and `fetchTodos` as the unique identifiers for that cache.
22
-
- The hook will mark itself as stale after the configured `staleTime` (defaults to `0`, or immediately).
20
+
- Since no other queries have been made with the `'todos'`query key, this query will show a hard loading state and make a network request to fetch the data.
21
+
-When the network request has completed, the returned data will be cached under the `'todos'`key.
22
+
- The hook will mark the data as stale after the configured `staleTime` (defaults to `0`, or immediately).
23
23
- A second instance of `useQuery('todos', fetchTodos)` mounts elsewhere.
24
-
- Because this exact data exists in the cache from the first instance of this query, that data is immediately returned from the cache.
25
-
- A background refetch is triggered for both queries (but only one request), since a new instance appeared on screen.
26
-
- Both instances are updated with the new data if the fetch is successful
24
+
- Since the cache already has data for the `'todos'` key from the first query, that data is immediately returned from the cache.
25
+
- The new instance triggers a new network request using its query function.
26
+
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](https://react-query.tanstack.com/reference/useQuery) are updated (including `isFetching`, `isLoading`, and other related values) because they have the same query key.
27
+
- When the request completes successfully, the cache's data under the `'todos'` key is updated with the new data, and both instances are updated with the new data.
27
28
- Both instances of the `useQuery('todos', fetchTodos)` query are unmounted and no longer in use.
28
29
- Since there are no more active instances of this query, a cache timeout is set using `cacheTime` to delete and garbage collect the query (defaults to **5 minutes**).
29
-
- Before the cache timeout has completed another instance of `useQuery('todos', fetchTodos)` mounts. The query immediately returns the available cached value while the `fetchTodos` function is being run in the background to populate the query with a fresh value.
30
+
- Before the cache timeout has completed another instance of `useQuery('todos', fetchTodos)` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
30
31
- The final instance of `useQuery('todos', fetchTodos)` unmounts.
31
32
- No more instances of `useQuery('todos', fetchTodos)` appear within **5 minutes**.
32
-
-This query and its data are deleted and garbage collected.
33
+
-The cached data under the `'todos'` key is deleted and garbage collected.
0 commit comments