Handle bigint in useQuerySubscription

packages/toolkit/src/query/defaultSerializeQueryArgs.ts

@@ -9,6 +9,7 @@ const cache: WeakMap<any, string> | undefined = WeakMap
 export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({
   endpointName,
   queryArgs,
+  replacer,
 }) => {
   let serialized = ''
 
@@ -17,33 +18,40 @@ export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({
   if (typeof cached === 'string') {
     serialized = cached
   } else {
-    const stringified = JSON.stringify(queryArgs, (key, value) =>
-      isPlainObject(value)
+    const stringified = JSON.stringify(queryArgs, (key, 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)
             .sort()
             .reduce<any>((acc, key) => {
               acc[key] = (value as any)[key]
               return acc
             }, {})
-        : value,
-    )
+        : value
+      return value
+    })
     if (isPlainObject(queryArgs)) {
       cache?.set(queryArgs, stringified)
     }
     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

@@ -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.
-        defaultSerializeQueryArgs,
+        (params) =>
+          defaultSerializeQueryArgs({ replacer: bigIntReplacer, ...params }),
         context.endpointDefinitions[name],
         name,
       )

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

@@ -100,7 +100,7 @@ const api = createApi({
     getError: build.query({
       query: () => '/error',
     }),
-    listItems: build.query<Item[], { pageNumber: number }>({
+    listItems: build.query<Item[], { pageNumber: number | bigint }>({
       serializeQueryArgs: ({ endpointName }) => {
         return endpointName
       },
@@ -151,6 +151,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
+  nextItemId = 0
   amount = 0
   listenerMiddleware.clearListeners()
 })
@@ -630,7 +631,40 @@ describe('hooks tests', () => {
     test(`useQuery refetches when query args object changes even if serialized args don't change`, async () => {
       function ItemList() {
         const [pageNumber, setPageNumber] = useState(0)
-        const { data = [] } = api.useListItemsQuery({ pageNumber })
+        const { data = [] } = api.useListItemsQuery({
+          pageNumber: pageNumber,
+        })
+
+        const renderedItems = data.map((item) => (
+          <li key={item.id}>ID: {item.id}</li>
+        ))
+        return (
+          <div>
+            <button onClick={() => setPageNumber(pageNumber + 1)}>
+              Next Page
+            </button>
+            <ul>{renderedItems}</ul>
+          </div>
+        )
+      }
+
+      render(<ItemList />, { wrapper: storeRef.wrapper })
+
+      await screen.findByText('ID: 0')
+
+      await act(async () => {
+        screen.getByText('Next Page').click()
+      })
+
+      await screen.findByText('ID: 3')
+    })
+
+    test(`useQuery gracefully handles bigint types`, async () => {
+      function ItemList() {
+        const [pageNumber, setPageNumber] = useState(0)
+        const { data = [] } = api.useListItemsQuery({
+          pageNumber: BigInt(pageNumber),
+        })
 
         const renderedItems = data.map((item) => (
           <li key={item.id}>ID: {item.id}</li>