Merge branch 'master' of https://github.com/reduxjs/redux-toolkit into update-ts-to-5.4

Author: aryaemami59

docs/api/autoBatchEnhancer.mdx

@@ -99,7 +99,7 @@ Any action that is tagged with `action.meta[SHOULD_AUTOBATCH] = true` will be tr
 
 - `{type: 'raf'}`: queues using `requestAnimationFrame` (default)
 - `{type: 'tick'}`: queues using `queueMicrotask`
-- `{type: 'timer, timeout: number}`: queues using `setTimeout`
+- `{type: 'timer', timeout: number}`: queues using `setTimeout`
 - `{type: 'callback', queueNotification: (notify: () => void) => void}`: lets you provide your own callback, such as a debounced or throttled function
 
 The default behavior is to queue the notifications using `requestAnimationFrame`.

errors.json

@@ -37,5 +37,6 @@
   "35": "Existing Redux context detected. If you already have a store set up, please use the traditional Redux setup.",
   "36": "When using custom hooks for context, all  hooks need to be provided: .\\nHook  was either not provided or not a function.",
   "37": "Warning: Middleware for RTK-Query API at reducerPath \"\" has not been added to the store.\n    You must add the middleware for RTK-Query to function correctly!",
-  "38": "Cannot refetch a query that has not been started yet."
-}
+  "38": "Cannot refetch a query that has not been started yet.",
+  "39": "called \\`injectEndpoints\\` to override already-existing endpointName  without specifying \\`overrideExisting: true\\`"
+}

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reduxjs/toolkit",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "The official, opinionated, batteries-included toolset for efficient Redux development",
   "author": "Mark Erikson <[email protected]>",
   "license": "MIT",

packages/toolkit/src/autoBatchEnhancer.ts

@@ -44,7 +44,7 @@ export type AutoBatchOptions =
  * By default, it will queue a notification for the end of the event loop tick.
  * However, you can pass several other options to configure the behavior:
  * - `{type: 'tick'}`: queues using `queueMicrotask`
- * - `{type: 'timer, timeout: number}`: queues using `setTimeout`
+ * - `{type: 'timer', timeout: number}`: queues using `setTimeout`
  * - `{type: 'raf'}`: queues using `requestAnimationFrame` (default)
  * - `{type: 'callback', queueNotification: (notify: () => void) => void}`: lets you provide your own callback
  *

packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts

@@ -1,3 +1,4 @@
+import { isAnyOf } from '@reduxjs/toolkit'
 import type { BaseQueryFn } from '../../baseQueryTypes'
 import type { QueryDefinition } from '../../endpointDefinitions'
 import type { ConfigState, QueryCacheKey } from '../apiState'
@@ -49,11 +50,18 @@ export const THIRTY_TWO_BIT_MAX_TIMER_SECONDS = 2_147_483_647 / 1_000 - 1
 export const buildCacheCollectionHandler: InternalHandlerBuilder = ({
   reducerPath,
   api,
+  queryThunk,
   context,
   internalState,
 }) => {
   const { removeQueryResult, unsubscribeQueryResult } = api.internalActions
 
+  const canTriggerUnsubscribe = isAnyOf(
+    unsubscribeQueryResult.match,
+    queryThunk.fulfilled,
+    queryThunk.rejected
+  )
+
   function anySubscriptionsRemainingForKey(queryCacheKey: string) {
     const subscriptions = internalState.currentSubscriptions[queryCacheKey]
     return !!subscriptions && !isObjectEmpty(subscriptions)
@@ -66,9 +74,11 @@ export const buildCacheCollectionHandler: InternalHandlerBuilder = ({
     mwApi,
     internalState,
   ) => {
-    if (unsubscribeQueryResult.match(action)) {
+    if (canTriggerUnsubscribe(action)) {
       const state = mwApi.getState()[reducerPath]
-      const { queryCacheKey } = action.payload
+      const { queryCacheKey } = unsubscribeQueryResult.match(action)
+        ? action.payload
+        : action.meta.arg
 
       handleUnsubscribe(
         queryCacheKey,

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -724,6 +724,68 @@ describe('hooks tests', () => {
       expect(res.data!.amount).toBeGreaterThan(originalAmount)
     })
 
+    // See https://github.com/reduxjs/redux-toolkit/issues/4267 - Memory leak in useQuery rapid query arg changes
+    test('Hook subscriptions are properly cleaned up when query is fulfilled/rejected', async () => {
+      // This is imported already, but it seems to be causing issues with the test on certain matrixes
+      function delay(ms: number) {
+        return new Promise((resolve) => setTimeout(resolve, ms))
+      }
+
+      const pokemonApi = createApi({
+        baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+        endpoints: (builder) => ({
+          getTest: builder.query<string, number>({
+            async queryFn() {
+              await new Promise((resolve) => setTimeout(resolve, 1000));
+              return { data: "data!" };
+            },
+            keepUnusedDataFor: 0,
+          }),
+        }),
+      })
+
+      const storeRef = setupApiStore(pokemonApi, undefined, {
+        withoutTestLifecycles: true,
+      })
+
+      const checkNumQueries = (count: number) => {
+        const cacheEntries = Object.keys((storeRef.store.getState()).api.queries)
+        const queries = cacheEntries.length
+
+        expect(queries).toBe(count)
+      }
+
+      let i = 0;
+
+      function User() {
+        const [fetchTest, { isFetching, isUninitialized }] =
+          pokemonApi.endpoints.getTest.useLazyQuery()
+
+        return (
+          <div>
+            <div data-testid="isUninitialized">{String(isUninitialized)}</div>
+            <div data-testid="isFetching">{String(isFetching)}</div>
+            <button data-testid="fetchButton" onClick={() => fetchTest(i++)}>
+              fetchUser
+            </button>
+          </div>
+        )
+      }
+
+      render(<User />, { wrapper: storeRef.wrapper })
+      fireEvent.click(screen.getByTestId('fetchButton'))
+      fireEvent.click(screen.getByTestId('fetchButton'))
+      fireEvent.click(screen.getByTestId('fetchButton'))
+      checkNumQueries(3)
+
+      await act(async () => {
+        await delay(1500)
+      })
+
+      // There should only be one stored query once they have had time to resolve
+      checkNumQueries( 1)
+    })
+
     // See https://github.com/reduxjs/redux-toolkit/issues/3182
     test('Hook subscriptions are properly cleaned up when changing skip back and forth', async () => {
       const pokemonApi = createApi({

packages/toolkit/tsup.config.ts

@@ -71,7 +71,7 @@ const buildTargets: BuildOptions[] = [
   {
     format: 'esm',
     name: 'legacy-esm',
-    target: 'esnext',
+    target: 'es2017',
     minify: false,
     env: '',
   },