proof of concept for handling bigint in useQuerySubscription

Author: rkofman

packages/toolkit/src/query/defaultSerializeQueryArgs.ts

@@ -36,6 +36,38 @@ export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({
   return `${endpointName}(${serialized})`
 }
 
+export const bigIntSafeSerializeQueryArgs: 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) => {
+      value = typeof value === 'bigint' ? { $bigint: value.toString() } : value
+      value = isPlainObject(value)
+        ? Object.keys(value)
+            .sort()
+            .reduce<any>((acc, key) => {
+              acc[key] = (value as any)[key]
+              return acc
+            }, {})
+        : 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>

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 { defaultSerializeQueryArgs } from '../defaultSerializeQueryArgs'
+import { bigIntSafeSerializeQueryArgs } from '../defaultSerializeQueryArgs'
 import type { UninitializedValue } from './constants'
 import { UNINITIALIZED_VALUE } from './constants'
 import type { ReactHooksModuleOptions } from './module'
@@ -768,7 +768,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         // 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,
+        bigIntSafeSerializeQueryArgs,
         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>