[Snyk] Upgrade @reduxjs/toolkit from 2.0.1 to 2.6.1 #84

syedabdullahali · 2025-04-07T02:40:41Z

Snyk has created this PR to upgrade @reduxjs/toolkit from 2.0.1 to 2.6.1.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

The recommended version is 16 versions ahead of your current version.
The recommended version was released a month ago.

Release notes

Package name: @reduxjs/toolkit

2.6.1 - 2025-03-07
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
- 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
2.6.0 - 2025-02-23
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
2.5.1 - 2025-01-26
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
2.5.0 - 2024-12-11
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
2.4.0 - 2024-11-28
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 the withTypes 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
2.3.0 - 2024-10-14
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.

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
- Fix serializeQueryArgs type by @ Reedgern in #4658
- Add the TypedQueryStateSelector helper type by @ aryaemami59 in #4656
- Pass query args to prepareHeaders function by @ kyletsang in #4638
- Implement a util function to batch-upsert cache entries by @ markerikson in #4561
- fetchBaseQuery: expose extraOptions to prepareHeaders by @ phryneas in #4291
Full Changelog: v2.2.8...v2.3.0
2.2.8 - 2024-10-08
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
- Export QueryExtraOptions and MutationExtraOptions by @ aryaemami59 in #4556
- Fix mangleErrors not preserving different error types by @ aryaemami59 in #4586
- Add the TypedUseQueryStateOptions helper type by @ aryaemami59 in #4604
- feat(baseQuery): expose queryCacheKey in baseQuery by @ HaakonSvane in #4636
- Fix AbortError being triggered incorrectly on createApi endpoint timeout by @ andrejpavlovic in #4628
- type: export QueryReturnValue by @ hornta in #4640
- call initiate to refetch queries from middleware by @ phryneas in #4651
Full Changelog: v2.2.7...v2.2.8
2.2.7 - 2024-07-27
2.2.6 - 2024-06-29
2.2.5 - 2024-05-16
2.2.4 - 2024-05-09
2.2.3 - 2024-03-31
2.2.2 - 2024-03-21
2.2.1 - 2024-02-14
2.2.0 - 2024-02-12
2.1.0 - 2024-01-24
2.0.1 - 2023-12-04

from @reduxjs/toolkit GitHub release notes

Important

Check the changes in this PR to ensure they won't cause issues with your project.
This PR was automatically created by Snyk using the credentials of a real user.
Snyk has automatically assigned this pull request, set who gets assigned.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information: <img src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI4MmEyM2FmZC04NWMxLTRlZTAtYjE1NC1iOWVlYTQwNmE2ZGQiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjgyYTIzYWZkLTg1...

Snyk has created this PR to upgrade @reduxjs/toolkit from 2.0.1 to 2.6.1. See this package in npm: @reduxjs/toolkit See this project in Snyk: https://app.snyk.io/org/syedabdullahali/project/6c71fd92-0409-4cb0-89c3-46ce15945a02?utm_source=github&utm_medium=referral&page=upgrade-pr

codesandbox · 2025-04-07T02:40:44Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

syedabdullahali assigned harshadashirsat6 Apr 7, 2025

[Snyk] Upgrade @reduxjs/toolkit from 2.0.1 to 2.6.1 #84

Are you sure you want to change the base?

[Snyk] Upgrade @reduxjs/toolkit from 2.0.1 to 2.6.1 #84

Uh oh!

Conversation

syedabdullahali commented Apr 7, 2025

Snyk has created this PR to upgrade @reduxjs/toolkit from 2.0.1 to 2.6.1.

Changelog

Infinite Query Fixes

Other Improvements

What's Changed

Changelog

RTK Query Infinite Query support

Using Infinite Queries

Docs and Examples

Notes

Thanks

What's Changed

Changelog

upsertQueryEntries fixes

What's Changed

Changelog

React 19 Compat

Other Fixes

What's Changed

Changelog

RTK Query Improvements

Bugfixes

Additional TS Types

TS Support Matrix Updates

What's Changed

Changelog

upsertQueryEntries

prepareHeaders Options

Additional TS Types

What's Changed

Changelog

Lazy Query Trigger Handling

Other Changes

What's Changed

Uh oh!

codesandbox bot commented Apr 7, 2025

Review or Edit in CodeSandbox

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

`upsertQueryEntries` fixes

`upsertQueryEntries`

`prepareHeaders` Options