Skip to content

Commit 4b0096c

Browse files
authored
📝 Clarify updateQueryData usage (#1679)
1 parent aefeb46 commit 4b0096c

File tree

1 file changed

+49
-2
lines changed

1 file changed

+49
-2
lines changed

docs/rtk-query/api/created-api/cache-management-utils.mdx

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ interface PatchCollection {
3131

3232
- **Parameters**
3333
- `endpointName`: a string matching an existing endpoint name
34-
- `args`: a cache key, used to determine which cached dataset needs to be updated
34+
- `args`: an argument matching that used for a previous query call, used to determine which cached dataset needs to be updated
3535
- `updateRecipe`: an Immer `produce` callback that can apply changes to the cached state
3636

3737
#### Description
@@ -44,7 +44,10 @@ The thunk returns an object containing `{patches: Patch[], inversePatches: Patch
4444

4545
This is typically used as the first step in implementing optimistic updates. The generated `inversePatches` can be used to revert the updates by calling `dispatch(patchQueryData(endpointName, args, inversePatches))`. Alternatively, the `undo` method can be called directly to achieve the same effect.
4646

47-
#### Example
47+
Note that the first two arguments (`endpointName` and `args`) are used to determine which existing
48+
cache entry to update. If no existing cache entry is found, the `updateRecipe` callback will not run.
49+
50+
#### Example 1
4851

4952
```ts no-transpile
5053
const patchCollection = dispatch(
@@ -54,6 +57,50 @@ const patchCollection = dispatch(
5457
)
5558
```
5659

60+
In the example above, `'getPosts'` is provided for the `endpointName`, and `undefined` is provided
61+
for `args`. This will match a query cache key of `'getPosts(undefined)'`.
62+
63+
i.e. it will match a cache entry that may have been created via any of the following calls:
64+
65+
```ts no-transpile
66+
api.endpoints.getPosts.useQuery()
67+
68+
useGetPostsQuery()
69+
70+
useGetPostsQuery(undefined, { ...options })
71+
72+
dispatch(api.endpoints.getPosts.initiate())
73+
74+
dispatch(api.endpoints.getPosts.initiate(undefined, { ...options }))
75+
```
76+
77+
#### Example 2
78+
79+
```ts no-transpile
80+
const patchCollection = dispatch(
81+
api.util.updateQueryData('getPostById', 1, (draftPost) => {
82+
draftPost.name = 'Lilly'
83+
})
84+
)
85+
```
86+
87+
In the example above, `'getPostById'` is provided for the `endpointName`, and `1` is provided
88+
for `args`. This will match a query cache key of `'getPostById(1)'`.
89+
90+
i.e. it will match a cache entry that may have been created via any of the following calls:
91+
92+
```ts no-transpile
93+
api.endpoints.getPostById.useQuery(1)
94+
95+
useGetPostByIdQuery(1)
96+
97+
useGetPostByIdQuery(1, { ...options })
98+
99+
dispatch(api.endpoints.getPostById.initiate(1))
100+
101+
dispatch(api.endpoints.getPostById.initiate(1, { ...options }))
102+
```
103+
57104
### `patchQueryData`
58105

59106
#### Signature

0 commit comments

Comments
 (0)