Skip to content

Commit 94b5c85

Browse files
committed
docs: clarify caching behavior
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.
1 parent c532d81 commit 94b5c85

File tree

1 file changed

+9
-8
lines changed

1 file changed

+9
-8
lines changed

docs/src/pages/guides/caching.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,17 @@ This caching example illustrates the story and lifecycle of:
1717
Let's assume we are using the default `cacheTime` of **5 minutes** and the default `staleTime` of `0`.
1818

1919
- 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).
2323
- 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`](../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.
2728
- Both instances of the `useQuery('todos', fetchTodos)` query are unmounted and no longer in use.
2829
- 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.
3031
- The final instance of `useQuery('todos', fetchTodos)` unmounts.
3132
- 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

Comments
 (0)