Handle bigint in useQuerySubscription

packages/toolkit/src/query/defaultSerializeQueryArgs.ts

@@ -17,22 +17,25 @@ 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) => {
+      // Handle bigints
+      value = typeof value === 'bigint' ? { $bigint: value.toString() } : 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})`
 }
 

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>

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

@@ -23,6 +23,16 @@ test('number arg', () => {
   ).toMatchInlineSnapshot(`"test(5)"`)
 })
 
+test('bigint arg has non-default serialization (intead of throwing)', () => {
+  expect(
+    defaultSerializeQueryArgs({
+      endpointDefinition,
+      endpointName,
+      queryArgs: BigInt(10),
+    }),
+  ).toMatchInlineSnapshot(`"test({"$bigint":"10"})"`)
+})
+
 test('simple object arg is sorted', () => {
   expect(
     defaultSerializeQueryArgs({