Skip to content

Bump @reduxjs/toolkit from 2.2.8 to 2.3.0

Dependabot requested to merge dependabot-npm_and_yarn-reduxjs-toolkit-2.3.0 into master

Bumps @reduxjs/toolkit from 2.2.8 to 2.3.0.

Release notes

Sourced from @​reduxjs/toolkit's releases.

v2.3.0

This feature release adds a new RTK Query upsertQueryEntries util to batch-upsert cache entries more efficiently, passes through additional values for use in prepareHeaders, and exports additional TS types around query options and selectors.

Changelog

upsertQueryEntries

RTK Query already had an upsertQueryData thunk that would upsert a single cache entry. However, some users wanted to upsert many cache entries (potentially hundreds or thousands), and found that upsertQueryData had poor performance in those cases. This is because upsertQueryData runs the full async request handling sequence, including dispatching both pending and fulfilled actions, each of which run the main reducer and update store subscribers. That means there's 2N store / UI updates per item, so upserting hundreds of items becomes extremely perf-intensive.

RTK Query now includes an api.util.upsertQueryEntries action 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 individual upsertQueryData calls.

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 upsertQueryEntries can 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 getPosts list endpoint response and prefilling the individual getPost(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 upsertQueryEntries in 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) =&gt; ({
          endpointName: 'getPost',
          arg: { id: post.id },
          value: post,
        })),
      ),
    )
  },
}),
getPost: build.query&lt;Post, Pick&lt;Post, 'id'&gt;&gt;({
  query: (post) =&gt; `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 upsertQueryData and upsertQueryEntries, see the upsertQueryEntries API reference.

... (truncated)

Commits
  • 77fb33d Release 2.3.0
  • fa0906e Merge pull request #4291 from reduxjs/pr/fetchBaseQuery-extraOptions
  • 896e4df Drop generic and make extraOptions unknown
  • 41487fd Fix arguments type
  • 1918f13 fix bad inference with an overload?
  • 6ef362f fixup test
  • 3e77381 fetchBaseQuery: expose extraOptions to prepareHeaders
  • 7b50a61 Merge pull request #4561 from reduxjs/feature/4106-rtkq-normalization
  • 3358c13 Fix Parameters headers
  • d38ff98 Merge pull request #4638 from kyletsang/prepareheaders-args
  • Additional commits viewable in compare view


Dependabot commands
You can trigger Dependabot actions by commenting on this MR
  • $dependabot recreate will recreate this MR rewriting all the manual changes and resolving conflicts

Merge request reports

Loading