Redux Toolkit · RTK Query · all subjects

cache-management/upsertqueryentries

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

upsertQueryEntries signature and parameters

upsertQueryEntries is a standard Redux action creator with signature: const upsertQueryEntries = (entries: NormalizedQueryUpsertEntry[]) => PayloadAction<NormalizedQueryUpsertEntry[]>. It accepts an array of objects that contain: endpointName (the name of the endpoint, such as "getPokemon"), 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()), value (the data to be upserted into this cache entry, exactly as formatted).

upsertQueryEntries differences from upsertQueryData

upsertQueryEntries is designed as a more efficient approach to bulk-inserting many entries at once than many individual calls to upsertQueryData. upsertQueryData upserts one cache entry at a time, is async, dispatches 2 separate actions (pending and fulfilled), and runs the transformResponse callback and merge callback if defined. upsertQueryEntries upserts many cache entries at once for any combination of endpoints, is a single synchronous action, does not run transformResponse (so the provided value fields must already be in the final format expected for that endpoint), but still runs the merge callback if defined.

upsertQueryEntries use cases

upsertQueryEntries has two main use cases: the first is prefilling the cache with data retrieved from storage on app startup, and the second is to act as a "pseudo-normalization" tool. RTK Query is not a "normalized" cache, but 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.

upsertQueryEntries behavior with existing entries

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, it will overwrite the existing cache entry data. 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.

upsertQueryEntries example

Example: const api = createApi({ endpoints: (build) => ({ getPosts: build.query<Post[], void>({ query: () => '/posts', async onQueryStarted(_, { dispatch, queryFulfilled }) { const res = await queryFulfilled; const posts = res.data; dispatch(api.util.upsertQueryEntries(posts.map((post) => ({ endpointName: 'getPost', arg: { id: post.id }, value: post, })))); } }), getPost: build.query<Post, Pick<Post, 'id'>>({ query: (post) => `post/${post.id}`, }), }) }). This pre-fills individual post entries with the results from the list endpoint query.

Give your agent this brain