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
Copy file name to clipboardExpand all lines: docs/rtk-query/usage/manual-cache-updates.mdx
+17-36
Original file line number
Diff line number
Diff line change
@@ -12,57 +12,38 @@ description: 'RTK Query > Usage > Manual Cache Updates: Updating and creating ca
12
12
13
13
## Overview
14
14
15
-
For most cases, in order to receive up to date data after a triggering a change in the backend,
16
-
you can take advantage of `cache tag invalidation` to perform
17
-
[automated re-fetching](./automated-refetching), which will cause a query to re-fetch its data
18
-
when it has been told that a mutation has occurred which would cause its data to become out of date.
19
-
In most cases, we recommend using `automated re-fetching` as a preference over `manual cache updates`,
20
-
unless you encounter the need to do so.
15
+
For most cases, in order to receive up to date data after a triggering a change in the backend, you can take advantage of cache tag invalidation to perform [automated re-fetching](./automated-refetching). This will cause a query to re-fetch its data when it has been told that a mutation has occurred which would cause its data to become out of date.
21
16
22
-
However, in some cases when refetch is not necessary, you may wish to update the cache data manually.
23
-
You can do it using provided by created API `util` object methods for both:
17
+
We recommend using automated re-fetching as a preference over manual cache updates in most situations.
24
18
25
-
- updating already existing cache entries with [`updateQueryData`](../api/created-api/api-slice-utils.mdx#updatequerydata)
26
-
- creating new or replacing existing cache entries with [`upsertQueryData`](../api/created-api/api-slice-utils.mdx#upsertquerydata)
19
+
However, there _are_ use cases when manual cache updates are necessary, such as "optimistic" or "pessimistic" updates, or modifying data as part of cache entry lifecycles.
27
20
28
-
Anywhere you have access to the `dispatch` method for the store instance, you can dispatch the
29
-
result of calling `updateQueryData` in order to update the cache data for a query endpoint,
30
-
if the corresponding cache entry exists or `upsertQueryData` to create new or replace existing one.
21
+
RTK Query exports thunks for these use cases, attached to `api.utils`:
22
+
23
+
-[`updateQueryData`](../api/created-api/api-slice-utils.mdx#updatequerydata): updates an already existing cache entry
24
+
-[`upsertQueryData`](../api/created-api/api-slice-utils.mdx#upsertquerydata): creates or replaces cache entries
25
+
26
+
Since these are thunks, you can dispatch them anywhere you have access to `dispatch`.
31
27
32
28
### Updating existing cache entries
33
-
For updates of existing cache entries use [`updateQueryData`](../api/created-api/api-slice-utils.mdx#updatequerydata).
34
29
35
-
`updateQueryData` is strictly intended to perform _updates_ to existing cache entries,
36
-
not create new entries. If an `updateQueryData` thunk action is dispatched that corresponds to
37
-
no existing cache entry for the provided `endpointName` + `args` combination, the provided `recipe`
38
-
will not be called, and no `patches` or `inversePatches` will be returned.
30
+
For updates of existing cache entries, use [`updateQueryData`](../api/created-api/api-slice-utils.mdx#updatequerydata).
31
+
32
+
`updateQueryData` is strictly intended to perform _updates_ to existing cache entries, not create new entries. If an `updateQueryData` thunk action is dispatched and the `endpointName` + `args` combination that does not match any existing cache entry, the provided `recipe` callback will not be called, and no `patches` or `inversePatches` will be returned.
39
33
40
34
Use cases for manual update of cache entries:
41
35
- Providing immediate feedback to the user when a mutation is attempted
42
-
- After a mutation, updating a single item in a large list of items that is already cached,
43
-
rather than re-fetching the whole list
44
-
- Debouncing a large number of mutations with immediate feedback as though they are being
45
-
applied, followed by a single request sent to the server to update the debounced attempts
36
+
- After a mutation, updating a single item in a large list of items that is already cached, rather than re-fetching the whole list
37
+
- Debouncing a large number of mutations with immediate feedback as though they are being applied, followed by a single request sent to the server to update the debounced attempts
46
38
47
39
### Creating new cache entries or replacing existing ones
48
-
To create or replace existing cache entries use [`upsertQueryData`](../api/created-api/api-slice-utils.mdx#upsertquerydata).
49
40
50
-
`upsertQueryData` is intended to perform _replacements_ to existing cache entries or _creation_ of new ones.
51
-
Due to the fact, that in `upsertQueryData` we do not have access to the previous state of the cache entry, since it can not exist yet,
52
-
the update may be performed only as a replacement. On the contrary, `updateQueryData` allows to perform a patching of the existing cache entry, but
53
-
can not create a new one.
41
+
To create or replace existing cache entries, use [`upsertQueryData`](../api/created-api/api-slice-utils.mdx#upsertquerydata).
54
42
55
-
:::tip
56
-
57
-
Manual creation of cache entries can introduce significant improvement in application performance and UX. Thanks to using the data we are already
58
-
aware of, we can avoid unnecessary requests and loaders.
43
+
`upsertQueryData` is intended to perform _replacements_ to existing cache entries or _creation_ of new ones. Since `upsertQueryData` does not have access to the previous state of the cache entry, the update may be performed only as a replacement. In comparison, `updateQueryData` allows patching of the existing cache entry, but cannot create a new one.
59
44
60
-
:::
61
45
62
-
Use cases for upserting cache entries in pair with [pessimistic updates](../usage/manual-cache-updates.mdx#pessimistic-updates):
63
-
- you create a new Post and backend returns its complete data including `id`. Then we
64
-
can use `upsertQueryData` to create a new cache entry for the `getPostById(id)` query, preventing unnecessary fetching it on enter.
65
-
- same can be applied for batch creations of items, when backend returns a list of created items with their ids.
46
+
One example use case is [pessimistic updates](../usage/manual-cache-updates.mdx#pessimistic-updates). If the client makes an API call to create a `Post`, the backend could return its complete data including the `id`. Then we can use `upsertQueryData` to create a new cache entry for the `getPostById(id)` query, preventing an extra fetch to retrieve the item later.
0 commit comments