Merge pull request #4048 from reduxjs/rtkq-createselector

docs/rtk-query/usage/customizing-create-api.mdx

@@ -48,6 +48,27 @@ const customCreateApi = buildCreateApi(
 )
 ```
 
+## Customizing `createSelector` for RTKQ
+
+Both `coreModule` and `reactHooksModule` accept a `createSelector` option which should be a selector creator instance from Reselect or with an equivalent signature.
+
+```ts
+import * as React from 'react'
+import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'
+import {
+  buildCreateApi,
+  coreModule,
+  reactHooksModule,
+} from '@reduxjs/toolkit/query/react'
+
+const createLruSelector = createSelectorCreator(lruMemoize)
+
+const customCreateApi = buildCreateApi(
+  coreModule({ createSelector: createLruSelector }),
+  reactHooksModule({ createSelector: createLruSelector })
+)
+```
+
 ## Creating your own module
 
 If you want to create your own module, you should review [the react-hooks module](https://github.com/reduxjs/redux-toolkit/blob/b74a52935a5840bebca5acdc8e2265e3b6497afa/src/query/react/module.ts) to see what an implementation would look like.

packages/toolkit/src/query/core/buildSelectors.ts

@@ -1,4 +1,5 @@
-import { createNextState, createSelector } from './rtkImports'
+import type { createSelector as _createSelector } from './rtkImports'
+import { createNextState } from './rtkImports'
 import type {
   MutationSubState,
   QuerySubState,
@@ -123,9 +124,11 @@ export function buildSelectors<
 >({
   serializeQueryArgs,
   reducerPath,
+  createSelector,
 }: {
   serializeQueryArgs: InternalSerializeQueryArgs
   reducerPath: ReducerPath
+  createSelector: typeof _createSelector
 }) {
   type RootState = _RootState<Definitions, string, string>
 

packages/toolkit/src/query/core/module.ts

@@ -49,6 +49,7 @@ import type { ReferenceCacheLifecycle } from './buildMiddleware/cacheLifecycle'
 import type { ReferenceQueryLifecycle } from './buildMiddleware/queryLifecycle'
 import type { ReferenceCacheCollection } from './buildMiddleware/cacheCollection'
 import { enablePatches } from 'immer'
+import { createSelector as _createSelector } from './rtkImports'
 
 /**
  * `ifOlderThan` - (default: `false` | `number`) - _number is value in seconds_
@@ -431,6 +432,13 @@ export type ListenerActions = {
 
 export type InternalActions = SliceActions & ListenerActions
 
+export interface CoreModuleOptions {
+  /**
+   * A selector creator (usually from `reselect`, or matching the same signature)
+   */
+  createSelector?: typeof _createSelector
+}
+
 /**
  * Creates a module containing the basic redux logic for use with `buildCreateApi`.
  *
@@ -439,7 +447,9 @@ export type InternalActions = SliceActions & ListenerActions
  * const createBaseApi = buildCreateApi(coreModule());
  * ```
  */
-export const coreModule = (): Module<CoreModule> => ({
+export const coreModule = ({
+  createSelector = _createSelector,
+}: CoreModuleOptions = {}): Module<CoreModule> => ({
   name: coreModuleName,
   init(
     api,
@@ -548,6 +558,7 @@ export const coreModule = (): Module<CoreModule> => ({
     } = buildSelectors({
       serializeQueryArgs: serializeQueryArgs as any,
       reducerPath,
+      createSelector,
     })
 
     safeAssign(api.util, { selectInvalidatedBy, selectCachedArgsForQuery })

packages/toolkit/src/query/react/buildHooks.ts

@@ -4,7 +4,6 @@ import type {
   ThunkAction,
   ThunkDispatch,
 } from '@reduxjs/toolkit'
-import { createSelector } from '@reduxjs/toolkit'
 import type { DependencyList } from 'react'
 import {
   useCallback,
@@ -53,10 +52,7 @@ import { UNINITIALIZED_VALUE } from './constants'
 import { useShallowStableValue } from './useShallowStableValue'
 import type { BaseQueryFn } from '../baseQueryTypes'
 import { defaultSerializeQueryArgs } from '../defaultSerializeQueryArgs'
-import {
-  InternalMiddlewareState,
-  SubscriptionSelectors,
-} from '../core/buildMiddleware/types'
+import type { SubscriptionSelectors } from '../core/buildMiddleware/types'
 
 // Copy-pasted from React-Redux
 export const useIsomorphicLayoutEffect =
@@ -582,6 +578,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     batch,
     hooks: { useDispatch, useSelector, useStore },
     unstable__sideEffectsInRender,
+    createSelector,
   },
   serializeQueryArgs,
   context,

packages/toolkit/src/query/react/module.ts

@@ -23,6 +23,7 @@ import {
 import type { QueryKeys } from '../core/apiState'
 import type { PrefetchOptions } from '../core/module'
 import { countObjectKeys } from '../utils/countObjectKeys'
+import { createSelector as _createSelector } from 'reselect'
 
 export const reactHooksModuleName = /* @__PURE__ */ Symbol()
 export type ReactHooksModule = typeof reactHooksModuleName
@@ -111,6 +112,10 @@ export interface ReactHooksModuleOptions {
    * ```
    */
   unstable__sideEffectsInRender?: boolean
+  /**
+   * A selector creator (usually from `reselect`, or matching the same signature)
+   */
+  createSelector?: typeof _createSelector
 }
 
 /**
@@ -140,6 +145,7 @@ export const reactHooksModule = ({
     useSelector: rrUseSelector,
     useStore: rrUseStore,
   },
+  createSelector = _createSelector,
   unstable__sideEffectsInRender = false,
   ...rest
 }: ReactHooksModuleOptions = {}): Module<ReactHooksModule> => {
@@ -191,6 +197,7 @@ export const reactHooksModule = ({
           batch,
           hooks,
           unstable__sideEffectsInRender,
+          createSelector,
         },
         serializeQueryArgs,
         context,

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

@@ -35,7 +35,12 @@ import { server } from './mocks/server'
 import type { UnknownAction } from 'redux'
 import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState'
 import type { SerializedError } from '@reduxjs/toolkit'
-import { createListenerMiddleware, configureStore } from '@reduxjs/toolkit'
+import {
+  createListenerMiddleware,
+  configureStore,
+  lruMemoize,
+  createSelectorCreator,
+} from '@reduxjs/toolkit'
 import { delay } from '../../utils'
 
 const MyContext = React.createContext<ReactReduxContextValue>(null as any)
@@ -126,4 +131,65 @@ describe('buildCreateApi', () => {
     `
     )
   })
+  test('allows passing createSelector instance', async () => {
+    const memoize = vi.fn(lruMemoize)
+    const createSelector = createSelectorCreator(memoize)
+    const createApi = buildCreateApi(
+      coreModule({ createSelector }),
+      reactHooksModule({ createSelector })
+    )
+    const api = createApi({
+      baseQuery: async (arg: any) => {
+        await waitMs()
+
+        return {
+          data: arg?.body ? { ...arg.body } : {},
+        }
+      },
+      endpoints: (build) => ({
+        getUser: build.query<{ name: string }, number>({
+          query: () => ({
+            body: { name: 'Timmy' },
+          }),
+        }),
+      }),
+    })
+
+    const storeRef = setupApiStore(api, {}, { withoutTestLifecycles: true })
+
+    await storeRef.store.dispatch(api.endpoints.getUser.initiate(1))
+
+    const selectUser = api.endpoints.getUser.select(1)
+
+    expect(selectUser(storeRef.store.getState()).data).toEqual({
+      name: 'Timmy',
+    })
+
+    expect(memoize).toHaveBeenCalledTimes(4)
+
+    memoize.mockClear()
+
+    function User() {
+      const { isFetching } = api.endpoints.getUser.useQuery(1)
+
+      return (
+        <div>
+          <div data-testid="isFetching">{String(isFetching)}</div>
+        </div>
+      )
+    }
+
+    function Wrapper({ children }: any) {
+      return <Provider store={storeRef.store}>{children}</Provider>
+    }
+
+    render(<User />, { wrapper: Wrapper })
+
+    await waitFor(() =>
+      expect(screen.getByTestId('isFetching').textContent).toBe('false')
+    )
+
+    // select() + selectFromResult
+    expect(memoize).toHaveBeenCalledTimes(8)
+  })
 })