fix(use-data-query): throw more specific error on serialization failure

services/data/src/react/hooks/stableVariablesHash.test.ts

@@ -0,0 +1,53 @@
+import { stableVariablesHash } from './stableVariablesHash'
+
+describe('stableVariablesHash', () => {
+    it('sorts objects before hashing', () => {
+        const one = {
+            a: {
+                one: 1,
+                two: 2,
+                three: 3,
+            },
+            b: [1, 2, 3],
+            c: 'c',
+        }
+        const two = {
+            c: 'c',
+            b: [1, 2, 3],
+            a: {
+                three: 3,
+                two: 2,
+                one: 1,
+            },
+        }
+
+        expect(stableVariablesHash(one)).toEqual(stableVariablesHash(two))
+    })
+
+    it('can handle primitives', () => {
+        const one = undefined
+        const two = 'string'
+        const three = 3
+        const four = null
+        const five = true
+
+        expect(stableVariablesHash(one)).toMatchInlineSnapshot(`undefined`)
+        expect(stableVariablesHash(two)).toMatchInlineSnapshot(`"\\"string\\""`)
+        expect(stableVariablesHash(three)).toMatchInlineSnapshot(`"3"`)
+        expect(stableVariablesHash(four)).toMatchInlineSnapshot(`"null"`)
+        expect(stableVariablesHash(five)).toMatchInlineSnapshot(`"true"`)
+    })
+
+    it('throws a clear error when something goes wrong', () => {
+        const unserializable = {
+            value: 'value',
+        }
+        unserializable.circular = unserializable
+
+        expect(() =>
+            stableVariablesHash(unserializable)
+        ).toThrowErrorMatchingInlineSnapshot(
+            `"Could not serialize variables. Make sure that the variables do not contain circular references and can be processed by JSON.stringify."`
+        )
+    })
+})

services/data/src/react/hooks/stableValueHash.ts → services/data/src/react/hooks/stableVariablesHash.ts

@@ -34,15 +34,25 @@ export function isPlainObject(o: any): o is Object {
  */
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function stableValueHash(value: any): string {
-    return JSON.stringify(value, (_, val) =>
-        isPlainObject(val)
-            ? Object.keys(val)
-                  .sort()
-                  .reduce((result, key) => {
-                      result[key] = val[key]
-                      return result
-                  }, {} as any)
-            : val
-    )
+export function stableVariablesHash(value: any): string {
+    let hash
+
+    try {
+        hash = JSON.stringify(value, (_, val) =>
+            isPlainObject(val)
+                ? Object.keys(val)
+                      .sort()
+                      .reduce((result, key) => {
+                          result[key] = val[key]
+                          return result
+                      }, {} as any)
+                : val
+        )
+    } catch (e) {
+        throw new Error(
+            'Could not serialize variables. Make sure that the variables do not contain circular references and can be processed by JSON.stringify.'
+        )
+    }
+
+    return hash
 }

services/data/src/react/hooks/useDataQuery.ts

@@ -3,7 +3,7 @@ import { useQuery, setLogger } from 'react-query'
 import { Query, QueryOptions } from '../../engine'
 import { FetchError } from '../../engine/types/FetchError'
 import { QueryRenderInput, QueryRefetchFunction } from '../../types'
-import { stableValueHash } from './stableValueHash'
+import { stableVariablesHash } from './stableVariablesHash'
 import { useDataEngine } from './useDataEngine'
 import { useStaticInput } from './useStaticInput'
 
@@ -107,10 +107,10 @@ export const useDataQuery = (
         if (newVariables) {
             // Use cached hash if it exists
             const currentHash =
-                variablesHash.current || stableValueHash(variables)
+                variablesHash.current || stableVariablesHash(variables)
 
             const mergedVariables = { ...variables, ...newVariables }
-            const mergedHash = stableValueHash(mergedVariables)
+            const mergedHash = stableVariablesHash(mergedVariables)
             const identical = currentHash === mergedHash
 
             if (identical) {