Releases: reduxjs/redux-toolkit
v2.9.0
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 Record
s to hold subscription data was inefficient because we have to iterate keys to check size. We've rewritten the subscription handling internals to use Map
s 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
- Add RawResultType as a type-only property on endpoints by @EskiMojo14 in #5037
- allow passing an array of specific schemas to skip by @EskiMojo14 in #5042
- fix(types): re-exporting WritableDraft from immer by @marinsokol5 in #5015
- Remove Serialisation from useStableQueryArgs by @riqts in #4996
- add addAsyncThunk method to reducer map builder by @EskiMojo14 in #5007
- Only run
transformResponse
when aquery
is used by @markerikson in #5049 - Assorted bugfixes for 2.8.3 by @markerikson in #5060
- Abort pending requests if the cache entry is removed by @markerikson in #5061
- Update TS CI config by @markerikson in #5065
- Rewrite subscription handling and polling calculations for better perf by @markerikson in #5064
Full Changelog: v2.8.2...v2.9.0
v2.8.2
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
- Restructure build config to fix RTKQ externals by @markerikson in #4985
Full Changelog: v2.8.1...v2.8.2
v2.8.1
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
- fix:
browser
exports
condition by @aryaemami59 in #4973
Full Changelog: v2.8.0...v2.8.1
v2.8.0
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
- fix: React-Native package exports by @aryaemami59 in #4887
- Add queryArg as 5th param to page param functions by @markerikson in #4967
Full Changelog: v2.7.0...v2.8.0
v2.7.0
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 '@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 themeta
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 forrefetch
and thefetchNext/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
- Process multiple update for the same new entity by @demyanm in #4890
- add infinite query support for updateCachedData by @alexmotoc in #4905
- add infinite query skip support by @alexmotoc in #4906
- Cache initial state in injected scenarios by @EskiMojo14 in #4908
- Rewrite providedTags handling for better perf by @markerikson in #4910
- Allow standard schemas to validate endpoint values by @EskiMojo14 in #4864
- fix(rtk-query):
useQuery
hook does not refetch afterresetApiState
by @juniusfree in #4758 - Drop TS 5.0 from compat matrix by @markerikson in #4925
- Add duplicate middleware dev check to configureStore by @markerikson in #4927
- Improve duplicate middleware error and save build output by @markerikson in #4928
- Add meta handling for infinite queries by @markerikson in #4939
- improve stability of useInfiniteQuerySubscription's return value by @EskiMojo14 in #4937
- Add
catchSchemaFailure
, and docs for RTKQ schema features by @EskiMojo14 in #4934
Full Changelog: v2.6.1...v2.7.0
v2.6.1
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
andprovidesTags
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
- Fix assorted infinite query types by @markerikson in #4869
- Add providesTags handling for upsertQueryEntries by @markerikson in #4872
- add infinite query type support for selectCachedArgsForQuery by @alexmotoc in #4880
- add more Typed wrappers and make sure they're all exported by @EskiMojo14 in #4866
- Fix infinite query type portability issues by @markerikson in #4881
- support passing an external abortsignal to createAsyncThunk by @EskiMojo14 in #4860
Full Changelog: v2.6.0...v2.6.1
v2.6.0
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:
- Usage Guides: Infinite Queries covers the new concepts, explains how to define infinite query endpoints and use the hooks, documents fetching behaviors, and describes common API interaction patterns
- API Reference:
createApi
documents the new infinite query endpoint options - Generated API Slices: React Hooks has been updated to better organize the hook descriptions, and covers the infinite query hook arguments and behaviors
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
- [API Concept] - Infinite Query API by @riqts in #4393
- RTKQ Infinite Query integration by @markerikson in #4738
and numerous specific sub-PRs that went into that integration PR as I worked through the implementation over the last few months.
Full Changelog: v2.5.1...v2.6.0
v2.5.1
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
- Ensure upserted cache entries always get written by @markerikson in #4768
Full Changelog: v2.5.0...v2.5.1
v2.5.0
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
- Migrate to React 19 by @aryaemami59 in #4409
- Handle additional
serializeQueryArgs
+skipToken
case by @markerikson in #4762
Full Changelog: v2.4.0...v2.5.0
v2.4.0
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
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
- add example to reproduce defect of serializeQueryArgs with skipToken by @Themezv in #4708
- Read
window.rAF
later to allow fake timers to work correctly by @ensconced in #4701 - Add type helpers for
OnQueryStarted
callbacks by @aryaemami59 in #4713 - Add a type for
createAsyncThunk
without thewithTypes
method by @EskiMojo14 in #4667 - Add ability to reset lazy query hooks by @alexmotoc in #4689
- Ignore nullish values in tag invalidations by @pierroberto in #4671
- Allow passing meta to retry.fail, and passing baseQuery to ensure types match by @EskiMojo14 in #4723
- Keep
isSuccess: true
when switching to an uninitialized cache entry by @markerikson in #4731 - Keep
isSuccess
consistent when refetching after an error by @markerikson in #4732 - Update to new version of upsert proposal, and fix listener equality checks by @EskiMojo14 in #4735
Full Changelog: v2.3.0...v2.4.0