Consolidate serializeQueryArgs override behavior into createApi

Author: markerikson

packages/toolkit/src/query/buildSerializeQueryArgs.ts

@@ -1,8 +1,10 @@
 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 { buildSerializeQueryArgs } from './buildSerializeQueryArgs'
+import {
+  defaultSerializeQueryArgs,
+  SerializeQueryArgs,
+} from './defaultSerializeQueryArgs'
 import type {
   EndpointBuilder,
   EndpointDefinitions,
@@ -236,18 +238,25 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
       })
     )
 
-    const { serializeQueryArgs, registerArgsSerializerForEndpoint } =
-      buildSerializeQueryArgs(options.serializeQueryArgs)
-
-    const optionsWithDefaults = {
+    const optionsWithDefaults: CreateApiOptions<any, any, any, any> = {
       reducerPath: 'api',
       keepUnusedDataFor: 60,
       refetchOnMountOrArgChange: false,
       refetchOnFocus: false,
       refetchOnReconnect: false,
       ...options,
       extractRehydrationInfo,
-      serializeQueryArgs,
+      serializeQueryArgs(queryArgsApi) {
+        let finalSerializeQueryArgs = defaultSerializeQueryArgs
+        if ('serializeQueryArgs' in queryArgsApi.endpointDefinition) {
+          finalSerializeQueryArgs =
+            queryArgsApi.endpointDefinition.serializeQueryArgs!
+        } else if (options.serializeQueryArgs) {
+          finalSerializeQueryArgs = options.serializeQueryArgs
+        }
+
+        return finalSerializeQueryArgs(queryArgsApi)
+      },
       tagTypes: [...(options.tagTypes || [])],
     }
 
@@ -269,8 +278,8 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
       enhanceEndpoints({ addTagTypes, endpoints }) {
         if (addTagTypes) {
           for (const eT of addTagTypes) {
-            if (!optionsWithDefaults.tagTypes.includes(eT as any)) {
-              optionsWithDefaults.tagTypes.push(eT as any)
+            if (!optionsWithDefaults.tagTypes!.includes(eT as any)) {
+              ;(optionsWithDefaults.tagTypes as any[]).push(eT)
             }
           }
         }
@@ -293,7 +302,7 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
     } as Api<BaseQueryFn, {}, string, string, Modules[number]['name']>
 
     const initializedModules = modules.map((m) =>
-      m.init(api as any, optionsWithDefaults, context)
+      m.init(api as any, optionsWithDefaults as any, context)
     )
 
     function injectEndpoints(
@@ -323,13 +332,6 @@ 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/createApi.ts

@@ -832,9 +832,14 @@ describe('custom serializeQueryArgs per endpoint', () => {
 
   const api = createApi({
     baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
+    serializeQueryArgs: ({ endpointName, queryArgs }) =>
+      `base-${endpointName}-${queryArgs}`,
     endpoints: (build) => ({
+      queryWithNoSerializer: build.query<SuccessResponse, number>({
+        query: (arg) => `${arg}`,
+      }),
       queryWithCustomSerializer: build.query<SuccessResponse, number>({
-        query: () => ({ url: '/success' }),
+        query: (arg) => `${arg}`,
         serializeQueryArgs: serializer1,
       }),
     }),
@@ -843,26 +848,33 @@ describe('custom serializeQueryArgs per endpoint', () => {
   const storeRef = setupApiStore(api)
 
   it('Works via createApi', async () => {
+    await storeRef.store.dispatch(
+      api.endpoints.queryWithNoSerializer.initiate(99)
+    )
+
     expect(serializer1).toHaveBeenCalledTimes(0)
 
     await storeRef.store.dispatch(
-      api.endpoints.queryWithCustomSerializer.initiate(5)
+      api.endpoints.queryWithCustomSerializer.initiate(42)
     )
 
-    const firstRef = api.endpoints.queryWithCustomSerializer.select(5)(
-      storeRef.store.getState()
-    )
     expect(serializer1).toHaveBeenCalled()
 
-    expect(firstRef.data).toEqual({ value: 'success' })
+    expect(
+      storeRef.store.getState().api.queries['base-queryWithNoSerializer-99']
+    ).toBeTruthy()
+
+    expect(
+      storeRef.store.getState().api.queries['queryWithCustomSerializer-42']
+    ).toBeTruthy()
   })
 
   const serializer2 = jest.fn(customArgsSerializer)
 
   const injectedApi = api.injectEndpoints({
     endpoints: (build) => ({
       injectedQueryWithCustomSerializer: build.query<SuccessResponse, number>({
-        query: () => ({ url: '/success' }),
+        query: (arg) => `${arg}`,
         serializeQueryArgs: serializer2,
       }),
     }),
@@ -875,12 +887,11 @@ describe('custom serializeQueryArgs per endpoint', () => {
       injectedApi.endpoints.injectedQueryWithCustomSerializer.initiate(5)
     )
 
-    const firstRef =
-      injectedApi.endpoints.injectedQueryWithCustomSerializer.select(5)(
-        storeRef.store.getState()
-      )
     expect(serializer2).toHaveBeenCalled()
-
-    expect(firstRef.data).toEqual({ value: 'success' })
+    expect(
+      storeRef.store.getState().api.queries[
+        'injectedQueryWithCustomSerializer-5'
+      ]
+    ).toBeTruthy()
   })
 })