Skip to content

Commit 5211b18

Browse files
committed
Add API docs for upsertQueryEntries
1 parent ef73a90 commit 5211b18

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed

docs/rtk-query/api/created-api/api-slice-utils.mdx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,86 @@ dispatch(
197197
patchCollection.undo()
198198
```
199199

200+
### `upsertQueryEntries`
201+
202+
A standard Redux action creator that accepts an array of individual cache entry descriptions, and immediately upserts them into the store. This is designed to efficiently bulk-insert many entries at once.
203+
204+
#### Signature
205+
206+
```ts no-transpile
207+
/**
208+
* A typesafe single entry to be upserted into the cache
209+
*/
210+
export type NormalizedQueryUpsertEntry<
211+
Definitions extends EndpointDefinitions,
212+
EndpointName extends QueryKeys<Definitions>,
213+
> = {
214+
endpointName: EndpointName
215+
arg: QueryArgFrom<Definitions[EndpointName]>
216+
value: ResultTypeFrom<Definitions[EndpointName]>
217+
}
218+
219+
const upsertQueryEntries = (entries: NormalizedQueryUpsertEntry[]) =>
220+
PayloadAction<NormalizedQueryUpsertEntry[]>
221+
```
222+
223+
- **Parameters**
224+
- `entries`: an array of objects that contain the data needed to upsert individual cache entries:
225+
- `endpointName`: the name of the endpoint, such as `"getPokemon"`
226+
- `arg`: the full query key argument needed to identify this cache entry, such as `"pikachu"` (same as you would pass to a `useQuery` hook or `api.endpoints.someEndpoint.select()`)
227+
- `value`: the data to be upserted into this cache entry, exactly as formatted.
228+
229+
#### Description
230+
231+
This method is designed as a more efficient approach to bulk-inserting many entries at once than many individual calls to `upsertQueryData`. As a comparison:
232+
233+
- `upsertQueryData`:
234+
- upserts one cache entry at a time
235+
- Is async
236+
- Dispatches 2 separate actions, `pending` and `fulfilled`
237+
- Runs the `transformResponse` callback if defined for that endpoint, as well as the `merge` callback if defined
238+
- `upsertQueryEntries`:
239+
- upserts many cache entries at once, and they may be for any combination of endpoints defined in the API
240+
- Is a single synchronous action
241+
- Does _not_ run `transformResponse`, so the provided `value` fields must already be in the final format expected for that endpoint. However, it will still run the `merge` callback if defined
242+
243+
Currently, this method has two main use cases. The first is prefilling the cache with data retrieved from storage on app startup. The second is to act as a "pseudo-normalization" tool. [RTK Query is _not_ a "normalized" cache](../../usage/cache-behavior.mdx#no-normalized-or-de-duplicated-cache). However, there are times when you may want to prefill other cache entries with the contents of another endpoint, such as taking the results of a `getPosts` list endpoint response and prefilling the individual `getPost(id)` endpoint cache entries.
244+
245+
If no cache entry for that cache key exists, a cache entry will be created and the data added. If a cache entry already exists, this will _overwrite_ the existing cache entry data.
246+
247+
If dispatched while an actual request is in progress, both the upsert and request will be handled as soon as they resolve, resulting in a "last result wins" update behavior.
248+
249+
#### Example
250+
251+
```ts no-transpile
252+
const api = createApi({
253+
endpoints: (build) => ({
254+
getPosts: build.query<Post[], void>({
255+
query: () => '/posts',
256+
async onQueryStarted(_, { dispatch, queryFulfilled }) {
257+
const res = await queryFulfilled
258+
const posts = res.data
259+
260+
// Pre-fill the individual post entries with the results
261+
// from the list endpoint query
262+
const entries = dispatch(
263+
api.util.upsertQueryEntries(
264+
posts.map((post) => ({
265+
endpointName: 'getPost',
266+
arg: { id: post.id },
267+
value: post,
268+
})),
269+
),
270+
)
271+
},
272+
}),
273+
getPost: build.query<Post, Pick<Post, 'id'>>({
274+
query: (post) => `post/${post.id}`,
275+
}),
276+
}),
277+
})
278+
```
279+
200280
### `prefetch`
201281

202282
#### Signature

0 commit comments

Comments
 (0)