feature : endpoint-specific query arg serialization

Author: michal-kurz

packages/toolkit/src/query/buildSerializeQueryArgs.ts

@@ -0,0 +1,34 @@
+import { Dictionary } from '@reduxjs/toolkit'
+import {
+  defaultSerializeQueryArgs,
+  SerializeQueryArgs,
+} from './defaultSerializeQueryArgs'
+
+export function buildSerializeQueryArgs(
+  globalSerializer: SerializeQueryArgs<any> = defaultSerializeQueryArgs
+) {
+  const endpointSpecificSerializers: Dictionary<SerializeQueryArgs<any>> = {}
+
+  const serializeQueryArgs: SerializeQueryArgs<any> = (params) => {
+    const endpointSpecificSerializer =
+      endpointSpecificSerializers[params.endpointName]
+
+    if (endpointSpecificSerializer) {
+      return endpointSpecificSerializer(params)
+    }
+
+    return globalSerializer(params)
+  }
+
+  const registerArgsSerializerForEndpoint = (
+    endpointName: string,
+    serializer: SerializeQueryArgs<any>
+  ) => {
+    endpointSpecificSerializers[endpointName] = serializer
+  }
+
+  return {
+    serializeQueryArgs,
+    registerArgsSerializerForEndpoint,
+  }
+}

packages/toolkit/src/query/createApi.ts

@@ -2,12 +2,12 @@ import type { Api, ApiContext, Module, ModuleName } from './apiTypes'
 import type { CombinedState } from './core/apiState'
 import type { BaseQueryArg, BaseQueryFn } from './baseQueryTypes'
 import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
-import { defaultSerializeQueryArgs } from './defaultSerializeQueryArgs'
+import { buildSerializeQueryArgs } from './buildSerializeQueryArgs'
 import type {
   EndpointBuilder,
   EndpointDefinitions,
 } from './endpointDefinitions'
-import { DefinitionType } from './endpointDefinitions'
+import { DefinitionType, isQueryDefinition } from './endpointDefinitions'
 import { nanoid } from '@reduxjs/toolkit'
 import type { AnyAction } from '@reduxjs/toolkit'
 import type { NoInfer } from './tsHelpers'
@@ -236,15 +236,18 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
       })
     )
 
+    const { serializeQueryArgs, registerArgsSerializerForEndpoint } =
+      buildSerializeQueryArgs(options.serializeQueryArgs)
+
     const optionsWithDefaults = {
       reducerPath: 'api',
-      serializeQueryArgs: defaultSerializeQueryArgs,
       keepUnusedDataFor: 60,
       refetchOnMountOrArgChange: false,
       refetchOnFocus: false,
       refetchOnReconnect: false,
       ...options,
       extractRehydrationInfo,
+      serializeQueryArgs,
       tagTypes: [...(options.tagTypes || [])],
     }
 
@@ -319,6 +322,14 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
 
           continue
         }
+
+        if (isQueryDefinition(definition) && definition.serializeQueryArgs) {
+          registerArgsSerializerForEndpoint(
+            endpointName,
+            definition.serializeQueryArgs
+          )
+        }
+
         context.endpointDefinitions[endpointName] = definition
         for (const m of initializedModules) {
           m.injectEndpoint(endpointName, definition)

packages/toolkit/src/query/endpointDefinitions.ts

@@ -1,4 +1,5 @@
 import type { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
+import { SerializeQueryArgs } from './defaultSerializeQueryArgs'
 import type { RootState } from './core/apiState'
 import type {
   BaseQueryExtraOptions,
@@ -272,6 +273,8 @@ export interface QueryExtraOptions<
    * Not to be used. A query should not invalidate tags in the cache.
    */
   invalidatesTags?: never
+
+  serializeQueryArgs?: SerializeQueryArgs<any>
 }
 
 export type QueryDefinition<

packages/toolkit/src/query/tests/createApi.test.ts

@@ -17,6 +17,7 @@ import {
 } from './helpers'
 import { server } from './mocks/server'
 import { rest } from 'msw'
+import { SerializeQueryArgs } from '../defaultSerializeQueryArgs'
 
 const originalEnv = process.env.NODE_ENV
 beforeAll(() => void ((process.env as any).NODE_ENV = 'development'))
@@ -818,3 +819,68 @@ describe('structuralSharing flag behaviors', () => {
     expect(firstRef.data === secondRef.data).toBeFalsy()
   })
 })
+
+describe('custom serializeQueryArgs per endpoint', () => {
+  const customArgsSerializer: SerializeQueryArgs<number> = ({
+    endpointName,
+    queryArgs,
+  }) => `${endpointName}-${queryArgs}`
+
+  type SuccessResponse = { value: 'success' }
+
+  const serializer1 = jest.fn(customArgsSerializer)
+
+  const api = createApi({
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
+    endpoints: (build) => ({
+      queryWithCustomSerializer: build.query<SuccessResponse, number>({
+        query: () => ({ url: '/success' }),
+        serializeQueryArgs: serializer1,
+      }),
+    }),
+  })
+
+  const storeRef = setupApiStore(api)
+
+  it('Works via createApi', async () => {
+    expect(serializer1).toHaveBeenCalledTimes(0)
+
+    await storeRef.store.dispatch(
+      api.endpoints.queryWithCustomSerializer.initiate(5)
+    )
+
+    const firstRef = api.endpoints.queryWithCustomSerializer.select(5)(
+      storeRef.store.getState()
+    )
+    expect(serializer1).toHaveBeenCalled()
+
+    expect(firstRef.data).toEqual({ value: 'success' })
+  })
+
+  const serializer2 = jest.fn(customArgsSerializer)
+
+  const injectedApi = api.injectEndpoints({
+    endpoints: (build) => ({
+      injectedQueryWithCustomSerializer: build.query<SuccessResponse, number>({
+        query: () => ({ url: '/success' }),
+        serializeQueryArgs: serializer2,
+      }),
+    }),
+  })
+
+  it('Works via injectEndpoints', async () => {
+    expect(serializer2).toHaveBeenCalledTimes(0)
+
+    await storeRef.store.dispatch(
+      injectedApi.endpoints.injectedQueryWithCustomSerializer.initiate(5)
+    )
+
+    const firstRef =
+      injectedApi.endpoints.injectedQueryWithCustomSerializer.select(5)(
+        storeRef.store.getState()
+      )
+    expect(serializer2).toHaveBeenCalled()
+
+    expect(firstRef.data).toEqual({ value: 'success' })
+  })
+})