refactor to remove code duplication

Author: rkofman

packages/toolkit/src/query/defaultSerializeQueryArgs.ts

@@ -9,36 +9,7 @@ const cache: WeakMap<any, string> | undefined = WeakMap
 export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({
   endpointName,
   queryArgs,
-}) => {
-  let serialized = ''
-
-  const cached = cache?.get(queryArgs)
-
-  if (typeof cached === 'string') {
-    serialized = cached
-  } else {
-    const stringified = JSON.stringify(queryArgs, (key, value) =>
-      // Sort the object keys before stringifying, to prevent useQuery({ a: 1, b: 2 }) having a different cache key than useQuery({ b: 2, a: 1 })
-      isPlainObject(value)
-        ? Object.keys(value)
-            .sort()
-            .reduce<any>((acc, key) => {
-              acc[key] = (value as any)[key]
-              return acc
-            }, {})
-        : value,
-    )
-    if (isPlainObject(queryArgs)) {
-      cache?.set(queryArgs, stringified)
-    }
-    serialized = stringified
-  }
-  return `${endpointName}(${serialized})`
-}
-
-export const bigIntSafeSerializeQueryArgs: SerializeQueryArgs<any> = ({
-  endpointName,
-  queryArgs,
+  replacer,
 }) => {
   let serialized = ''
 
@@ -48,8 +19,8 @@ export const bigIntSafeSerializeQueryArgs: SerializeQueryArgs<any> = ({
     serialized = cached
   } else {
     const stringified = JSON.stringify(queryArgs, (key, value) => {
-      // Translate bigint fields to a serializable value
-      value = typeof value === 'bigint' ? { $bigint: value.toString() } : value
+      // Use custom replacer first before applying key-sorting behavior:
+      value = replacer ? replacer(key, value) : value
       // Sort the object keys before stringifying, to prevent useQuery({ a: 1, b: 2 }) having a different cache key than useQuery({ b: 2, a: 1 })
       value = isPlainObject(value)
         ? Object.keys(value)
@@ -66,18 +37,21 @@ export const bigIntSafeSerializeQueryArgs: SerializeQueryArgs<any> = ({
     }
     serialized = stringified
   }
-  // Sort the object keys before stringifying, to prevent useQuery({ a: 1, b: 2 }) having a different cache key than useQuery({ b: 2, a: 1 })
   return `${endpointName}(${serialized})`
 }
 
 export type SerializeQueryArgs<QueryArgs, ReturnType = string> = (_: {
   queryArgs: QueryArgs
   endpointDefinition: EndpointDefinition<any, any, any, any>
   endpointName: string
+  // Allows for a custom stringify replacer while keeping key-sorting behavior. e.g. for serializing bigint.
+  replacer?: (key: string, value: any) => {}
 }) => ReturnType
 
 export type InternalSerializeQueryArgs = (_: {
   queryArgs: any
   endpointDefinition: EndpointDefinition<any, any, any, any>
   endpointName: string
+  // Allows for a custom stringify replacer while keeping key-sorting behavior. e.g. for serializing bigint.
+  replacer?: (key: string, value: any) => {}
 }) => QueryCacheKey

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

@@ -45,7 +45,7 @@ import {
 import { shallowEqual } from 'react-redux'
 import type { BaseQueryFn } from '../baseQueryTypes'
 import type { SubscriptionSelectors } from '../core/buildMiddleware/types'
-import { bigIntSafeSerializeQueryArgs } from '../defaultSerializeQueryArgs'
+import { defaultSerializeQueryArgs } from '../defaultSerializeQueryArgs'
 import type { UninitializedValue } from './constants'
 import { UNINITIALIZED_VALUE } from './constants'
 import type { ReactHooksModuleOptions } from './module'
@@ -761,14 +761,17 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         subscriptionSelectorsRef.current =
           returnedValue as unknown as SubscriptionSelectors
       }
+      const bigIntReplacer = (_: string, value: any) =>
+        typeof value === 'bigint' ? { $bigint: value.toString() } : value
       const stableArg = useStableQueryArgs(
         skip ? skipToken : arg,
         // Even if the user provided a per-endpoint `serializeQueryArgs` with
         // a consistent return value, _here_ we want to use the default behavior
         // so we can tell if _anything_ actually changed. Otherwise, we can end up
         // with a case where the query args did change but the serialization doesn't,
         // and then we never try to initiate a refetch.
-        bigIntSafeSerializeQueryArgs,
+        (params) =>
+          defaultSerializeQueryArgs({ replacer: bigIntReplacer, ...params }),
         context.endpointDefinitions[name],
         name,
       )