feat: replace JSON.stringify with replaceDeepEqual in structural sharing integrity check

packages/query-core/src/__tests__/query.test.tsx

@@ -975,36 +975,48 @@ describe('query', () => {
 
     const queryFn = vi.fn()
 
+    const data: Array<{
+      id: number
+      name: string
+      link: null | { id: number; name: string; link: unknown }
+    }> = Array.from({ length: 5 })
+      .fill(null)
+      .map((_, index) => ({
+        id: index,
+        name: `name-${index}`,
+        link: null,
+      }))
+
+    if (data[0] && data[1]) {
+      data[0].link = data[1]
+      data[1].link = data[0]
+    }
+
     queryFn.mockImplementation(async () => {
       await sleep(10)
-
-      const data: Array<{
-        id: number
-        name: string
-        link: null | { id: number; name: string; link: unknown }
-      }> = Array.from({ length: 5 })
-        .fill(null)
-        .map((_, index) => ({
-          id: index,
-          name: `name-${index}`,
-          link: null,
-        }))
-
-      if (data[0] && data[1]) {
-        data[0].link = data[1]
-        data[1].link = data[0]
-      }
-
       return data
     })
 
-    await queryClient.prefetchQuery({ queryKey: key, queryFn })
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn,
+      initialData: structuredClone(data),
+    })
+
+    const query = queryCache.find({ queryKey: key })!
 
     expect(queryFn).toHaveBeenCalledTimes(1)
 
+    expect(query.state.status).toBe('error')
+    expect(
+      query.state.error?.message.includes(
+        'contains non-serializable data. Error: circular reference detected.',
+      ),
+    ).toBeTruthy()
+
     expect(consoleMock).toHaveBeenCalledWith(
       expect.stringContaining(
-        'StructuralSharing requires data to be JSON serializable',
+        'Structural sharing requires data to be JSON serializable',
       ),
     )
 

packages/query-core/src/__tests__/utils.test.tsx

@@ -172,6 +172,20 @@ describe('core/utils', () => {
       expect(replaceEqualDeep(object, array)).toBe(array)
     })
 
+    it('should throw when the value is a circular reference', () => {
+      const value: Array<{ foo?: unknown }> = [{}]
+      value[0]!.foo = value
+
+      const value2: Array<{ foo?: unknown }> = [{}]
+      value2[0]!.foo = value2
+
+      expect(() =>
+        replaceEqualDeep(value, value2),
+      ).toThrowErrorMatchingInlineSnapshot(
+        `[Error: circular reference detected.]`,
+      )
+    })
+
     it('should return the previous value when the next value is an equal array', () => {
       const prev = [1, 2]
       const next = [1, 2]

packages/query-core/src/utils.ts

@@ -242,42 +242,54 @@ export function partialMatchKey(a: any, b: any): boolean {
  */
 export function replaceEqualDeep<T>(a: unknown, b: T): T
 export function replaceEqualDeep(a: any, b: any): any {
-  if (a === b) {
-    return a
-  }
+  const seen = new WeakSet()
+
+  function _replaceEqualDeep(a: any, b: any) {
+    if (a === b) {
+      return a
+    }
+
+    const array = isPlainArray(a) && isPlainArray(b)
+
+    if (array || (isPlainObject(a) && isPlainObject(b))) {
+      if (seen.has(a)) {
+        throw new Error('circular reference detected.')
+      }
+      seen.add(a)
+
+      const aItems = array ? a : Object.keys(a)
+      const aSize = aItems.length
+      const bItems = array ? b : Object.keys(b)
+      const bSize = bItems.length
+      const copy: any = array ? [] : {}
 
-  const array = isPlainArray(a) && isPlainArray(b)
-
-  if (array || (isPlainObject(a) && isPlainObject(b))) {
-    const aItems = array ? a : Object.keys(a)
-    const aSize = aItems.length
-    const bItems = array ? b : Object.keys(b)
-    const bSize = bItems.length
-    const copy: any = array ? [] : {}
-
-    let equalItems = 0
-
-    for (let i = 0; i < bSize; i++) {
-      const key = array ? i : bItems[i]
-      if (
-        ((!array && aItems.includes(key)) || array) &&
-        a[key] === undefined &&
-        b[key] === undefined
-      ) {
-        copy[key] = undefined
-        equalItems++
-      } else {
-        copy[key] = replaceEqualDeep(a[key], b[key])
-        if (copy[key] === a[key] && a[key] !== undefined) {
+      let equalItems = 0
+
+      for (let i = 0; i < bSize; i++) {
+        const key = array ? i : bItems[i]
+
+        if (
+          ((!array && aItems.includes(key)) || array) &&
+          a[key] === undefined &&
+          b[key] === undefined
+        ) {
+          copy[key] = undefined
           equalItems++
+        } else {
+          copy[key] = _replaceEqualDeep(a[key], b[key])
+          if (copy[key] === a[key] && a[key] !== undefined) {
+            equalItems++
+          }
         }
       }
+
+      return aSize === bSize && equalItems === aSize ? a : copy
     }
 
-    return aSize === bSize && equalItems === aSize ? a : copy
+    return b
   }
 
-  return b
+  return _replaceEqualDeep(a, b)
 }
 
 /**
@@ -354,19 +366,17 @@ export function replaceData<
   if (typeof options.structuralSharing === 'function') {
     return options.structuralSharing(prevData, data) as TData
   } else if (options.structuralSharing !== false) {
-    if (process.env.NODE_ENV !== 'production') {
-      try {
-        JSON.stringify(prevData)
-        JSON.stringify(data)
-      } catch (error) {
-        console.error(
-          `StructuralSharing requires data to be JSON serializable. To fix this, turn off structuralSharing or return JSON-serializable data from your queryFn. [${options.queryHash}]: ${error}`,
-        )
-      }
+    try {
+      // Structurally share data between prev and new data if needed
+      return replaceEqualDeep(prevData, data)
+    } catch (error) {
+      console.error(
+        `Structural sharing requires data to be JSON serializable. To fix this, turn off structuralSharing or return JSON-serializable data from your queryFn. [${options.queryHash}]: ${error}`,
+      )
+      throw new Error(
+        `Query hash ${options.queryHash} contains non-serializable data. ${error}`,
+      )
     }
-
-    // Structurally share data between prev and new data if needed
-    return replaceEqualDeep(prevData, data)
   }
   return data
 }