Skip to content

Update redux (major) #7216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update redux (major) #7216

wants to merge 1 commit into from

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Sep 8, 2024 •
edited
Loading

This PR contains the following updates:

Package Change Age Confidence
@reduxjs/toolkit (source) 1.9.7 -> 2.9.2 age confidence
react-redux 8.1.3 -> 9.2.0 age confidence

Release Notes

reduxjs/redux-toolkit (@​reduxjs/toolkit)

v2.9.2

Compare Source

This bugfix release fixes a potential internal data leak in SSR environments, improves handling of headers in fetchBaseQuery, improves retry handling for unexpected errors and request aborts, and fixes a longstanding issue with prefetch leaving an unused subscription. We've also shipped a new graphqlRequestBaseQuery release with updated dependencies and better error handling.

Changelog

Internal Subscription Handling

We had a report that a Redux SSR app had internal subscription data showing up across different requests. After investigation, this was a bug introduced by the recent RTKQ perf optimizations, where the internal subscription fields were hoisted outside of the middleware setup and into createApi itself. This meant they existed outside of the per-store-instance lifecycle. We've reworked the logic to ensure the data is per-store again. We also fixed another issue that miscalculated when there was an active request while checking for cache entry cleanup.

Note that no actual app data was leaked in this case, just the internal subscription IDs that RTKQ uses in its own middleware to track the existence of subscriptions per cache entry.

fetchBaseQuery Headers

We've updated fetchBaseQuery to avoid setting content-type in cases where a non-JSONifiable value like FormData is being passed as the request body, so that the browser can set that content type itself. It also now sets the accept header based on the selected responseHandler (JSON or text).

retry Behavior and Cleanup

The retry util now respects the maxRetries option when catching unknown errors in addition to the existing known errors logic. It also now checks the request's AbortSignal and will stop retrying if aborted.

In conjunction with that, dispatching resetApiState will now abort all in-flight requests.

The prefetch util and usePrefetch hook had a long-standing issue where they would create a subscription for a cache entry, but there was no way to clean up that subscription. This meant that the cache entry was effectively permanent. They now initiate the request without adding a subscription. This will fetch the cache entry and leave it in the store for the keepUnusedDataFor period as intended, giving your app time to actually subscribe to the value (such as prefetching the cache entry in a route handler, and then subscribing in a component).

graphqlRequestBaseQuery

We've published @rtk-query/graphql-request-base-query v2.3.2, which updates the graphql-request dep to ^7. We also fixed an issue where the error handling rethrew unknown errors - it now returns {error} as a base query is supposed to.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.9.1...v2.9.2

v2.9.1

Compare Source

This bugfix release fixes how sorted entity adapters handle duplicate IDs, tweaks the TS types for RTKQ query state cache entries to improve how the data field is handled, and adds better cleanup for long-running listener middleware effects.

What's Changed

  • fix(entityAdapter): ensure sorted addMany keeps first occurrence of duplicate ids by @​demyanm in #​5097
  • fix(entityAdapter): ensure sorted setMany keeps just unique IDs in state.ids by @​demyanm in #​5107
  • fix(types): ensure non-undefined data on isSuccess with exactOptionalPropertyTypes by @​CO0Ki3 in #​5088
  • Allow executing effects that have become unsubscribed to be canceled by listenerMiddleware.clearListeners by @​chris-chambers in #​5102

Full Changelog: reduxjs/redux-toolkit@v2.9.0...v2.9.1

v2.9.0

Compare Source

This feature release rewrites RTK Query's internal subscription and polling systems and the useStableQueryArgs hook for better perf, adds automatic AbortSignal handling to requests still in progress when a cache entry is removed, fixes a bug with the transformResponse option for queries, adds a new builder.addAsyncThunk method, and fixes assorted other issues.

Changelog

RTK Query Performance Improvements

We had reports that RTK Query could get very slow when there were thousands of subscriptions to the same cache entry. After investigation, we found that the internal polling logic was attempting to recalculate the minimum polling time after every new subscription was added. This was highly inefficient, as most subscriptions don't change polling settings, and it required repeated O(n) iteration over the growing list of subscriptions. We've rewritten that logic to debounce the update check and ensure a max of one polling value update per tick for the entire API instance.

Related, while working on the request abort changes, testing showed that use of plain Records to hold subscription data was inefficient because we have to iterate keys to check size. We've rewritten the subscription handling internals to use Maps instead, as well as restructuring some additional checks around in-flight requests.

These two improvements drastically improved runtime perf for the thousands-of-subscriptions-one-cache-entry repro, eliminating RTK methods as visible hotspots in the perf profiles. It likely also improves perf for general usage as well.

We've also changed the implementation of our internal useStableQueryArgs hook to avoid calling serializeQueryArgs on its value, which can avoid potential perf issues when a query takes a very large object as its cache key.

[!NOTE]
The internal logic switched from serializing the query arg to doing reference checks on nested values. This means that if you are passing a non-POJO value in a query arg, such as useSomeQuery({a: new Set()}), and you have refetchOnMountOrArgChange enabled, this will now trigger refeteches each time as the Set references are now considered different based on equality instead of serialization.

Abort Signal Handling on Cleanup

We've had numerous requests over time for various forms of "abort in-progress requests when the data is no longer needed / params change / component unmounts / some expensive request is taking too long". This is a complex topic with multiple potential use cases, and our standard answer has been that we don't want to abort those requests - after all, cache entries default to staying in memory for 1 minute after the last subscription is removed, so RTKQ's cache can still be updated when the request completes. That also means that it doesn't make sense to abort a request "on unmount".

However, it does then make sense to abort an in-progress request if the cache entry itself is removed. Given that, we've updated our cache handling to automatically call the existing resPromise.abort() method in that case, triggering the AbortSignal attached to the baseQuery. The handling at that point depends on your app - fetchBaseQuery should handle that, a custom baseQuery or queryFn would need to listen to the AbortSignal.

We do have an open issue asking for further discussions of potential abort / cancelation use cases and would appreciate further feedback.

New Options

The builder callback used in createReducer and createSlice.extraReducers now has builder.addAsyncThunk available, which allows handling specific actions from a thunk in the same way that you could define a thunk inside createSlice.reducers:

        const slice = createSlice({
          name: 'counter',
          initialState: {
            loading: false,
            errored: false,
            value: 0,
          },
          reducers: {},
          extraReducers: (builder) =>
            builder.addAsyncThunk(asyncThunk, {
              pending(state) {
                state.loading = true
              },
              fulfilled(state, action) {
                state.value = action.payload
              },
              rejected(state) {
                state.errored = true
              },
              settled(state) {
                state.loading = false
              },
            }),
        })

createApi and individual endpoint definitions now accept a skipSchemaValidation option with an array of schema types to skip, or true to skip validation entirely (in case you want to use a schema for its types, but the actual validation is expensive).

Bug Fixes

The infinite query implementation accidentally changed the query internals to always run transformResponse if provided, including if you were using upsertQueryData(), which then broke. It's been fixed to only run on an actual query request.

The internal changes to the structure of the state.api.provided structure broke our handling of extractRehydrationInfo - we've updated that to handle the changed structure.

The infinite query status fields like hasNextPage are now a looser type of boolean initially, rather than strictly false.

TS Types

We now export Immer's WritableDraft type to fix another non-portable types issue.

We've added an api.endpoints.myEndpoint.types.RawResultType types-only field to match the other available fields.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.8.2...v2.9.0

v2.8.2

Compare Source

This bugfix release fixes a bundle size regression in RTK Query from the build and packaging changes in v2.8.0.

If you're using v2.8.0 or v2.8.1, please upgrade to v2.8.2 right away to resolve that bundle size issue!

Changelog

RTK Query Bundle Size

In v2.8.0, we reworked our packaging setup to better support React Native. While there weren't many meaningful code changes, we did alter our bundling build config file. In the process, we lost the config options to externalize the @reduxjs/toolkit core when building the RTK Query nested entry points. This resulted in a regression where the RTK core code also got bundled directly into the RTK Query artifacts, resulting in a significant size increase.

This release fixes the build config and restores the previous RTKQ build artifact sizes.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.8.1...v2.8.2

v2.8.1

Compare Source

This bugfix release makes an additional update to the package config to fix a regression that happened with Jest and jest-environment-jsdom.

[!CAUTION]
This release had a bundle size regression. Please update to v2.8.2 to resolve that issue.

Changes

More Package Updates

After releasing v2.8.0, we got reports that Jest tests were breaking. After investigation we concluded that jest-environment-jsdom was looking at the new browser package exports condition we'd added to better support JSPM, finding an ESM file containing the export keyword, and erroring because it doesn't support ES modules correctly.

#​4971 (comment) listed several viable workarounds, but this is enough of an issue we wanted to fix it directly. We've tweaked the package exports setup again, and it appears to resolve the issue with Jest.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.8.0...v2.8.1

v2.8.0

Compare Source

This feature release improves React Native compatibility by updating our package exports definitions, and adds queryArg as an additional parameter to infinite query page param functions.

[!CAUTION]
This release had a bundle size regression, as well as a breakage with jest-environment-jsdom. Please update to v2.8.2 to resolve those issues.

Changelog

Package Exports and React Native Compatibility

Expo and the Metro bundler have been adding improved support for the exports field in package.json files, but those changes started printing warnings due to how some of our package definitions were configured.

We've reworked the package definitions (again!), and this should be resolved now.

Infinite Query Page Params

The signature for the getNext/PreviousPageParam functions has been:

(
    lastPage: DataType,
    allPages: Array<DataType>,
    lastPageParam: PageParam,
    allPageParams: Array<PageParam>,
  ) => PageParam | undefined | null

This came directly from React Query's API and implementation.

We've had some requests to make the endpoint's queryArg available in page param functions. For React Query, that isn't necessary because the callbacks are defined inline when you call the useInfiniteQuery hook, so you've already got the query arg available in scope and can use it. Since RTK Query defines these callbacks as part of the endpoint definition, the query arg isn't in scope.

We've added queryArg as an additional 5th parameter to these functions in case it's needed.

Other Changes

We've made a few assorted docs updates, including replacing the search implementation to now use a local index generated on build (which should be more reliable and also has a nicer results list uI), and fixing some long-standing minor docs issues.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.7.0...v2.8.0

v2.7.0

Compare Source

RTK has hit Stage 2.7! 🤣 This feature release adds support for Standard Schema validation in RTK Query endpoints, fixes several issues with infinite queries, improves perf when infinite queries provide tags, adds a dev-mode check for duplicate middleware, and improves reference stability in slice selectors and infinite query hooks.

Changelog

Standard Schema Validation for RTK Query

Apps often need to validate responses from the server, both to ensure the data is correct, and to help enforce that the data matches the expected TS types. This is typically done with schema libraries such as Zod, Valibot, and Arktype. Because of the similarities in usage APIs, those libraries and others now support a common API definition called Standard Schema, allowing you to plug your chosen validation library in anywhere Standard Schema is supported.

RTK Query now supports using Standard Schema to validate query args, responses, and errors. If schemas are provided, the validations will be run and errors thrown if the data is invalid. Additionally, providing a schema allows TS inference for that type as well, allowing you to omit generic types from the endpoint.

Schema usage is per-endpoint, and can look like this:

import { createApi, fetchBaseQuery } from '@&#8203;reduxjs/toolkit/query/react'
import * as v from 'valibot'

const postSchema = v.object({
  id: v.number(),
  name: v.string(),
})
type Post = v.InferOutput<typeof postSchema>

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    getPost: build.query({
      // infer arg from here
      query: ({ id }: { id: number }) => `/post/${id}`,
      // infer result from here
      responseSchema: postSchema,
    }),
    getTransformedPost: build.query({
      // infer arg from here
      query: ({ id }: { id: number }) => `/post/${id}`,
      // infer untransformed result from here
      rawResponseSchema: postSchema,
      // infer transformed result from here
      transformResponse: (response) => ({
        ...response,
        published_at: new Date(response.published_at),
      }),
    }),
  }),
})

If desired, you can also configure schema error handling with the catchSchemaFailure option. You can also disable actual runtime validation with skipSchemaValidation (primarily useful for cases when payloads may be large and expensive to validate, but you still want to benefit from the TS type inference).

See the "Schema Validation" docs section in the createApi reference and the usage guide sections on queries, infinite queries, and mutations, for more details.

Infinite Query Fixes

This release fixes several reported issue with infinite queries:

  • The lifecycleApi.updateCachedData method is now correctly available
  • The skip option now correctly works for infinite query hooks
  • Infinite query fulfilled actions now include the meta field from the base query (such as {request, response}). For cases where multiple pages are being refetched, this will be the meta from the last page fetched.
  • useInfiniteQuerySubscription now returns stable references for refetch and the fetchNext/PreviousPage methods
upsertQueryEntries, Tags Performance and API State Structure

We recently published a fix to actually process per-endpoint providedTags when using upsertQueryEntries. However, this exposed a performance issue - the internal tag handling logic was doing repeated O(n) iterations over all endpoint+tag entries in order to clear out existing references to that cache key. In cases where hundreds or thousands of cache entries were being inserted, this became extremely expensive.

We've restructured the state.api.provided data structure to handle reverse-mapping between tags and cache keys, which drastically improves performance in this case. However, it's worth noting that this is a change to that state structure. This shouldn't affect apps, because the RTKQ state is intended to be treated as a black box and not generally directly accessed by user app code. However, it's possible someone may have depended on that specific state structure when writing a custom selector, in which case this would break. An actual example of this is the Redux DevTools RTKQ panel, which iterates the tags data while displaying cache entries. That did break with this change. Prior to releasing RTK 2.7,we released Redux DevTools 3.2.10, which includes support for both the old and new state.api.provided definitions.

TS Support Matrix Updates

Following with the DefinitelyTyped support matrix, we've officially dropped support for TS 5.0, and currently support TS 5.1 - 5.8. (RTK likely still works with 5.0, but we no longer test against that in CI.)

Duplicate Middleware Dev Checks

configureStore now checks the final middleware array for duplicate middleware references. This will catch cases such as accidentally adding the same RTKQ API middleware twice (such as adding baseApi.middleware and injectedApi.middlweware - these are actually the same object and same middleware).

Unlike the other dev-mode checks, this is part of configureStore itself, not getDefaultMiddleware().

This can be configured via the new duplicateMiddlewareCheck option.

Other Changes

createEntityAdapter now correctly handles adding an item and then applying multiple updates to it.

The generated combineSlices selectors will now return the same placeholder initial state reference for a given slice, rather than returning a new initial state reference every time.

useQuery hooks should now correctly refetch after dispatching resetApiState.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.6.1...v2.7.0

v2.6.1

Compare Source

This bugfix release fixes several assorted types issues with the initial infinite query feature release, and adds support for an optional signal argument to createAsyncThunk.

Changelog

Infinite Query Fixes

We've fixed several types issues that were reported with infinite queries after the 2.6.0 release:

  • matchFulfilled and providesTags now get the correct response types
  • We've added pre-typed Type* types to represent infinite queries, similar to the existing pre-defined types for queries and mutations
  • selectCachedArgsForQuery now supports fetching args for infinite query endpoints
  • We fixed some TS type portability issues with infinite queries that caused errors when generating TS declarations
  • useInfiniteQueryState/Subscription now correctly expect just the query arg, not the combined {queryArg, pageParam} object
Other Improvements

createAsyncThunk now accepts an optional {signal} argument. If provided, the internal AbortSignal handling will tie into that signal.

upsertQueryEntries now correctly generates provided tags for upserted cache entries.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.6.0...v2.6.1

v2.6.0

Compare Source

This feature release adds infinite query support to RTK Query.

Changelog

RTK Query Infinite Query support

Since we first released RTK Query in 2021, we've had users asking us to add support for "infinite queries" - the ability to keep fetching additional pages of data for a given endpoint. It's been by far our most requested feature. Until recently, our answer was that we felt there were too many use cases to support with a single API design approach.

Last year, we revisited this concept and concluded that the best approach was to mimic the flexible infinite query API design from React Query. We had additional discussions with @​tkdodo , who described the rationale and implementation approach and encouraged us to use their API design, and @​riqts provided an initial implementation on top of RTKQ's existing internals.

We're excited to announce that this release officially adds full infinite query endpoint support to RTK Query!

Using Infinite Queries

As with React Query, the API design is based around "page param" values that act as the query arguments for fetching a specific page for the given cache entry.

Infinite queries are defined with a new build.infiniteQuery() endpoint type. It accepts all of the same options as normal query endpoints, but also needs an additional infiniteQueryOptions field that specifies the infinite query behaviors. With TypeScript, you must supply 3 generic arguments: build.infiniteQuery<ResultType, QueryArg, PageParam>, where ResultType is the contents of a single page, QueryArg is the type passed in as the cache key, and PageParam is the value used to request a specific page.

The endpoint must define an initialPageParam value that will be used as the default (and can be overridden if desired). It also needs a getNextPageParam callback that will calculate the params for each page based on the existing values, and optionally a getPreviousPageParam callback if reverse fetching is needed. Finally, a maxPages option can be provided to limit the entry cache size.

The query and queryFn methods now receive a {queryArg, pageParam} object, instead of just the queryArg.

For the cache entries and hooks, the data field is now an object like {pages: ResultType[], pageParams: PageParam[]>. This gives you flexibility in how you use the data for rendering.

const pokemonApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/pokemon' }),
  endpoints: (build) => ({
    // 3 TS generics: page contents, query arg, page param
    getInfinitePokemonWithMax: build.infiniteQuery<Pokemon[], string, number>({
      infiniteQueryOptions: {
        // Must provide a default initial page param value
        initialPageParam: 1,
        // Optionally limit the number of cached pages
        maxPages: 3,
        // Must provide a `getNextPageParam` function
        getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
          lastPageParam + 1,
        // Optionally provide a `getPreviousPageParam` function
        getPreviousPageParam: (
          firstPage,
          allPages,
          firstPageParam,
          allPageParams,
        ) => {
          return firstPageParam > 0 ? firstPageParam - 1 : undefined
        },
      },
      // The `query` function receives `{queryArg, pageParam}` as its argument
      query({ queryArg, pageParam }) {
        return `/type/${queryArg}?page=${pageParam}`
      },
    }),
  }),
})

As with all RTKQ functionality, the core logic is UI-agnostic and does not require React. However, using the RTKQ React entry point will also auto-generate useInfiniteQuery hooks for these endpoints. Infinite query hooks fetch the initial page, then provide fetchNext/PreviousPage functions to let you trigger requests for more pages.

function PokemonList({
    pokemonType = 'fire',
  }: {
    pokemonType?: string
   ) {
  const {
    data,
    isFetching,
    isSuccess,
    fetchNextPage,
    fetchPreviousPage,
    refetch,
  } = api.useGetInfinitePokemonInfiniteQuery(pokemonType)

  const handlePreviousPage = async () => {
    const res = await fetchPreviousPage()
  }

  const handleNextPage = async () => {
    const res = await fetchNextPage()
  }
  
  // `data` is a `{pages, pageParams}` object.
  // You can use those to render whatever UI you need.
  // In this case, flatten per-page arrays of results for this endpoint
  // into a single array to render a list.
  const allPokemon = data?.pages.flat() ?? [];

  // render UI with pages, show loading state, fetch as needed
}
Docs and Examples

The RTK Query docs have been updated with new content and explanations for infinite queries:

We've also added a new infinite query example app in the repo that shows several usage patterns like pagination, cursors, infinite scrolling, and limit+offset queries.

Notes

As with all new features and functionality, more code does mean an increase in bundle size.

We did extensive work to byte-shave and optimize the final bundle size for this feature. Final estimates indicate that this adds about 4.2Kmin to production bundles. That's comparable to React Query's infinite query support size.

However, given RTKQ's current architecture, that bundle size increase is included even if you aren't using any infinite query endpoints in your application. Given the significant additional functionality, that seems like an acceptable tradeoff. (And as always, having this kind of functionality built into RTKQ means that your app benefits when it uses this feature without having to add a lot of additional code to your own app, which would likely be much larger.)

Longer-term, we hope to investigate reworking some of RTKQ's internal architecture to potentially make some of the features opt-in for better bundle size optimizations, but don't have a timeline for that work.

Thanks

This new feature wouldn't have been possible without huge amounts of assistance from several people. We'd like to thank:

  • @​tkdodo of TanStack Query, for happily letting us reuse the API design and implementation approach that they worked hard to figure out, and offering us his advice and knowledge on why they made specific design choices
  • @​riqts , for building the first initial POC draft PR long before we were even ready to begin thinking about this ourselves
  • @​remus-selea and @​agusterodin , for trying out various stages of the draft PRs and offering significant detailed feedback and bug reports as I iterated on the implementation

What's Changed

and numerous specific sub-PRs that went into that integration PR as I worked through the implementation over the last few months.

Full Changelog: reduxjs/redux-toolkit@v2.5.1...v2.6.0

v2.5.1

Compare Source

This bugfix release fixes a logic issue with the new upsertQueryEntries util that sometimes kept entries in a pending state indefinitely.

Changelog

upsertQueryEntries fixes

Users reported that in some cases, use of upsertQueryEntries to insert RTKQ cache entries prevented any further refetches of that data from happening. After investigation, we found a logic mismatch for how we handle upserts vs the existing upsertQueryData util, which meant that sometimes the entry would be left in a pending state expecting a fulfilled action from a request ID that would never happen.

This release fixes that issue and ensures the updates and refetches happen correctly.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.5.0...v2.5.1

v2.5.0

Compare Source

This feature release updates the React peer dependency to work with React 19, and fixes an additional skip token issue.

Changelog

React 19 Compat

React 19 was just released! We've updated our peer dep to accept React 19, and updated our runtime and type tests to check against both React 18 and 19.

Also see React-Redux v9.2.0 for the same peer dep update.

Other Fixes

We previously fixed an issue with the RTKQ core where serializeQueryArgs callbacks could be called with skipToken, potentially leading to errors. We've fixed an additional location in the useQuery hooks where that could happen as well.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.4.0...v2.5.0

v2.4.0

Compare Source

This feature release includes multiple tweaks and fixes to RTK Query functionality, additional exported TS types, and drops support for TS versions earlier than 5.0.

Changelog

RTK Query Improvements

Lazy query hooks can now be reset.

retry.fail now accepts meta as a second argument.

Tag invalidation arrays now ignore nullish values.

We did some small internal refactoring around Maps and default values that shrank bundle size slightly.

Bugfixes

Passing skipToken to a query hook now bails out before running any other logic, which fixes cases where serializeQueryArgs previously threw an error because there were no args to process.

The autoBatchEnhancer now reads window.requestAnimationFrame later, which it to work properly with Jest fake timers.

We fixed cases where the hook result isSuccess flag would briefly flicker to false when switched to a different cache entry that was uninitialized, and would briefly flicker to true when refetching a query that previously errored.

The listener middleware previously had inconsistent logic checks for comparing against existing listener entries (effect + type, vs effect only). It now always checks both effect + type.

Additional TS Types

We now export Typed[Query|Mutation]OnQueryStarted helpers to let you define onQueryStarted callbacks outside of createApi if desired.

We also now export a CreateAsyncThunkFunction type that can be used to type userland wrappers around createAsyncThunk.

TS Support Matrix Updates

We've historically tried to maintain TS backwards compatibility as long as possible, and made occasional updates to our TS support matrix in minor versions over time. As of RTK 2.3.0, we officially supported back through TS 4.7.

As of this release, we're tweaking that support policy to match the policy used by DefinitelyTyped:

Definitely Typed only tests packages on versions of TypeScript that are less than 2 years old
image

Given that, we've dropped official support for TS versions earlier than 5.0. (RTK may work with those versions, but we no longer test against them and won't try to fix issues with those versions.)

We'll continue to update our TS support matrix over time based on that 2-year rolling window.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.3.0...v2.4.0

v2.3.0

Compare Source

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) => ({
              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 upsertQueryData and upsertQueryEntries, see the upsertQueryEntries API reference.

prepareHeaders Options

The prepareHeaders callback for fetchBaseQuery now receives two additional values in the api argument:

  • arg: the URL string or FetchArgs object that was passed in to fetchBaseQuery for this endpoint
  • extraOptions: any extra options that were provided to the base query
Additional TS Types

We've added a TypedQueryStateSelector type that can be used to pre-type selectors for use with selectFromResult:

const typedSelectFromResult: TypedQueryStateSelector<
  PostsApiResponse,
  QueryArgument,
  BaseQueryFunction,
  SelectedResult
> = (state) => ({ posts: state.data?.posts ?? EMPTY_ARRAY })

function PostsList() {
  const { posts } = useGetPostsQuery(undefined, {
    selectFromResult: typedSelectFromResult,
  })
}

We've also exported several additional TS types around base queries and tag definitions.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.2.8...v2.3.0

v2.2.8

Compare Source

This bugfix release fixes a long-standing issue with RTK Query lazy query triggers returning stale data in some cases, fixes an error handling issue in RTK Query, and exports additional TS types.

Changelog

Lazy Query Trigger Handling

We'd had a couple long-standing issues reporting that const result = await someLazyQueryTrigger() sometimes returned stale data, especially if a mutation had just invalidated that query's tag.

We finally got a good repro of this issue and identified it as a mis-written call inside of the middleware that skipped past the necessary handling to activate the correct query status tracking in that scenario. This should now be fixed.

Other Changes

Timeout handling in RTKQ endpoints should now correctly throw a timeout-related error instead of an AbortError.

Base queries now have access to the current queryCacheKey value so it can be used in deciding query logic.

We've exported several more TS types related to query options, as some users have been depending on those even though they previously weren't part of the public API.

What's Changed

Full Changelog: reduxjs/redux-toolkit@v2.2.7...v2.2.8

v2.2.7

Compare Source

This bugfix release fixes issues with "TS type portability" errors, improves build artifact tree shaking behavior, and exports some additional TS types.

Changelog

TS Type Portability

We've had a slew of issues reported around "TS type portability" errors, such as:

The error messages are typically along the lines of:

Type error: The inferred type of 'configureStore' cannot be named without a reference to '@&#8203;reduxjs/toolkit/node_modules/redux'. This is likely not portable. A type annotation is necessary.

@​aryaemami59

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate
Copy link
Contributor Author

renovate bot commented Sep 8, 2024 •
edited
Loading

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm warn Unknown env config "store". This will stop working in the next major version of npm.
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: @types/[email protected]
npm error node_modules/@types/react
npm error   dev @types/react@"18.0.28" from the root project
npm error   @types/react@"*" from @types/[email protected]
npm error   node_modules/@types/hoist-non-react-statics
npm error     @types/hoist-non-react-statics@"^3.3.1" from @expo/[email protected]
npm error     node_modules/@expo/react-native-action-sheet
npm error       @expo/react-native-action-sheet@"4.1.0" from the root project
npm error       1 more (@frogpond/markdown)
npm error   4 more (@types/react-native, @types/react-native-button, ...)
npm error
npm error Could not resolve dependency:
npm error peerOptional @types/react@"^18.2.25 || ^19" from [email protected]
npm error node_modules/react-redux
npm error   react-redux@"9.2.0" from the root project
npm error   peerOptional react-redux@"^7.2.1 || ^8.1.3 || ^9.0.0" from @reduxjs/[email protected]
npm error   node_modules/@reduxjs/toolkit
npm error     @reduxjs/toolkit@"2.9.2" from the root project
npm error
npm error Conflicting peer dependency: @types/[email protected]
npm error node_modules/@types/react
npm error   peerOptional @types/react@"^18.2.25 || ^19" from [email protected]
npm error   node_modules/react-redux
npm error     react-redux@"9.2.0" from the root project
npm error     peerOptional react-redux@"^7.2.1 || ^8.1.3 || ^9.0.0" from @reduxjs/[email protected]
npm error     node_modules/@reduxjs/toolkit
npm error       @reduxjs/toolkit@"2.9.2" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /runner/cache/others/npm/_logs/2025-10-25T20_48_09_413Z-eresolve-report.txt
npm error A complete log of this run can be found in: /runner/cache/others/npm/_logs/2025-10-25T20_48_09_413Z-debug-0.log

@renovate renovate bot force-pushed the renovate/major-redux branch from 03c2a1b to a700ddb Compare September 12, 2024 13:31
@hawkrives hawkrives added the ci/skip-detox bypass issues with detox or code signing label Sep 16, 2024
@renovate renovate bot force-pushed the renovate/major-redux branch 2 times, most recently from 208c98c to 9a90c33 Compare October 17, 2024 22:07
@renovate renovate bot force-pushed the renovate/major-redux branch from 9a90c33 to 1bf013b Compare December 1, 2024 22:20
@renovate renovate bot force-pushed the renovate/major-redux branch 2 times, most recently from 5b3cdf9 to 4af3c8d Compare December 14, 2024 03:28
@renovate renovate bot force-pushed the renovate/major-redux branch from 4af3c8d to 58f07e2 Compare January 29, 2025 22:01
@renovate renovate bot force-pushed the renovate/major-redux branch from 58f07e2 to 1f46b73 Compare February 27, 2025 02:06
@renovate renovate bot force-pushed the renovate/major-redux branch from 1f46b73 to 4f691d0 Compare March 10, 2025 22:21
@renovate renovate bot force-pushed the renovate/major-redux branch from 4f691d0 to 176cf42 Compare April 19, 2025 19:08
@renovate renovate bot force-pushed the renovate/major-redux branch 2 times, most recently from 24dde09 to 3f129f5 Compare May 11, 2025 02:09
@renovate renovate bot force-pushed the renovate/major-redux branch from 3f129f5 to c899a20 Compare May 17, 2025 18:29
@renovate renovate bot force-pushed the renovate/major-redux branch from c899a20 to 6dc27e0 Compare August 10, 2025 14:21
@renovate renovate bot force-pushed the renovate/major-redux branch from 6dc27e0 to bf07c60 Compare September 7, 2025 00:17
@renovate renovate bot force-pushed the renovate/major-redux branch 3 times, most recently from 9f49af8 to 7f65f80 Compare October 3, 2025 15:51
@renovate renovate bot force-pushed the renovate/major-redux branch from 7f65f80 to 81fdf46 Compare October 5, 2025 08:59
@renovate renovate bot force-pushed the renovate/major-redux branch from 81fdf46 to a09513c Compare October 20, 2025 06:28
@renovate renovate bot force-pushed the renovate/major-redux branch from a09513c to 2db4602 Compare October 25, 2025 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@drewvolz drewvolz Awaiting requested review from drewvolz drewvolz is a code owner

@hawkrives hawkrives Awaiting requested review from hawkrives hawkrives is a code owner

@rye rye Awaiting requested review from rye rye is a code owner

Assignees

No one assigned

Labels

ci/skip-detox bypass issues with detox or code signing

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@hawkrives