Sourced from @reduxjs/toolkit's
releases.
v2.3.0
This feature release adds a new RTK Query
upsertQueryEntriesutil to batch-upsert cache entries more efficiently, passes through additional values for use inprepareHeaders, and exports additional TS types around query options and selectors.Changelog
upsertQueryEntriesRTK Query already had an
upsertQueryDatathunk that would upsert a single cache entry. However, some users wanted to upsert many cache entries (potentially hundreds or thousands), and found thatupsertQueryDatahad poor performance in those cases. This is becauseupsertQueryDataruns the full async request handling sequence, including dispatching bothpendingandfulfilledactions, each of which run the main reducer and update store subscribers. That means there's2Nstore / UI updates per item, so upserting hundreds of items becomes extremely perf-intensive.RTK Query now includes an
api.util.upsertQueryEntriesaction that is meant to handle the batched upsert use case more efficiently. It's a single synchronous action that accepts an array of many{endpointName, arg, value}entries to upsert. This results in a single store update, making this vastly better for performance vs many individualupsertQueryDatacalls.We see this as having two main use cases. The first is prefilling the cache with data retrieved from storage on app startup (and it's worth noting that
upsertQueryEntriescan accept entries for many different endpoints as part of the same array).The second is to act as a "pseudo-normalization" tool. RTK Query is not a "normalized" 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
getPostslist endpoint response and prefilling the individualgetPost(id)endpoint cache entries, so that components that reference an individual item endpoint already have that data available.Currently, you can implement the "pseudo-normalization" approach by dispatching
upsertQueryEntriesin an endpoint lifecycle, like this:const api = createApi({ endpoints: (build) => ({ getPosts: build.query<Post[], void>({ query: () => '/posts', async onQueryStarted(_, { dispatch, queryFulfilled }) { const res = await queryFulfilled const posts = res.data// Pre-fill the individual post entries with the results // from the list endpoint query 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}`, }),}),
})
Down the road we may add a new option to query endpoints that would let you provide the mapping function and have it automatically update the corresponding entries.
For additional comparisons between
upsertQueryDataandupsertQueryEntries, see theupsertQueryEntriesAPI reference.
... (truncated)
77fb33d
Release 2.3.0fa0906e
Merge pull request #4291
from reduxjs/pr/fetchBaseQuery-extraOptions896e4df
Drop generic and make extraOptions unknown41487fd
Fix arguments type1918f13
fix bad inference with an overload?6ef362f
fixup test3e77381
fetchBaseQuery: expose extraOptions to prepareHeaders7b50a61
Merge pull request #4561
from reduxjs/feature/4106-rtkq-normalization3358c13
Fix Parameters headersd38ff98
Merge pull request #4638
from kyletsang/prepareheaders-args