use useSerializedStableValue for value comparison (#1533)

Co-authored-by: Matt Sutkowski <[email protected]>

Author: phryneas

packages/toolkit/src/query/react/buildHooks.ts

@@ -31,8 +31,9 @@ import type {
   QueryActionCreatorResult,
   MutationActionCreatorResult,
 } from '@reduxjs/toolkit/dist/query/core/buildInitiate'
+import type { SerializeQueryArgs } from '@reduxjs/toolkit/dist/query/defaultSerializeQueryArgs'
 import { shallowEqual } from 'react-redux'
-import type { Api } from '@reduxjs/toolkit/dist/query/apiTypes'
+import type { Api, ApiContext } from '@reduxjs/toolkit/dist/query/apiTypes'
 import type {
   Id,
   NoInfer,
@@ -45,9 +46,10 @@ import type {
   PrefetchOptions,
 } from '@reduxjs/toolkit/dist/query/core/module'
 import type { ReactHooksModuleOptions } from './module'
-import { useShallowStableValue } from './useShallowStableValue'
+import { useStableQueryArgs } from './useSerializedStableValue'
 import type { UninitializedValue } from './constants'
 import { UNINITIALIZED_VALUE } from './constants'
+import { useShallowStableValue } from './useShallowStableValue'
 
 // Copy-pasted from React-Redux
 export const useIsomorphicLayoutEffect =
@@ -482,9 +484,13 @@ type GenericPrefetchThunk = (
 export function buildHooks<Definitions extends EndpointDefinitions>({
   api,
   moduleOptions: { batch, useDispatch, useSelector, useStore },
+  serializeQueryArgs,
+  context,
 }: {
   api: Api<any, Definitions, any, any, CoreModule>
   moduleOptions: Required<ReactHooksModuleOptions>
+  serializeQueryArgs: SerializeQueryArgs<any>
+  context: ApiContext<Definitions>
 }) {
   return { buildQueryHooks, buildMutationHook, usePrefetch }
 
@@ -523,7 +529,12 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         Definitions
       >
       const dispatch = useDispatch<ThunkDispatch<any, any, AnyAction>>()
-      const stableArg = useShallowStableValue(skip ? skipToken : arg)
+      const stableArg = useStableQueryArgs(
+        skip ? skipToken : arg,
+        serializeQueryArgs,
+        context.endpointDefinitions[name],
+        name
+      )
       const stableSubscriptionOptions = useShallowStableValue({
         refetchOnReconnect,
         refetchOnFocus,
@@ -658,7 +669,12 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         QueryDefinition<any, any, any, any, any>,
         Definitions
       >
-      const stableArg = useShallowStableValue(skip ? skipToken : arg)
+      const stableArg = useStableQueryArgs(
+        skip ? skipToken : arg,
+        serializeQueryArgs,
+        context.endpointDefinitions[name],
+        name
+      )
 
       const lastValue = useRef<any>()
 

packages/toolkit/src/query/react/module.ts

@@ -109,7 +109,7 @@ export const reactHooksModule = ({
   useStore = rrUseStore,
 }: ReactHooksModuleOptions = {}): Module<ReactHooksModule> => ({
   name: reactHooksModuleName,
-  init(api, options, context) {
+  init(api, { serializeQueryArgs }, context) {
     const anyApi = api as any as Api<
       any,
       Record<string, any>,
@@ -120,6 +120,8 @@ export const reactHooksModule = ({
     const { buildQueryHooks, buildMutationHook, usePrefetch } = buildHooks({
       api,
       moduleOptions: { batch, useDispatch, useSelector, useStore },
+      serializeQueryArgs,
+      context,
     })
     safeAssign(anyApi, { usePrefetch })
     safeAssign(context, { batch })

packages/toolkit/src/query/react/useSerializedStableValue.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useMemo } from 'react'
+import type { SerializeQueryArgs } from '@reduxjs/toolkit/dist/query/defaultSerializeQueryArgs'
+import type { EndpointDefinition } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
+
+export function useStableQueryArgs<T>(
+  queryArgs: T,
+  serialize: SerializeQueryArgs<any>,
+  endpointDefinition: EndpointDefinition<any, any, any, any>,
+  endpointName: string
+) {
+  const incoming = useMemo(
+    () => ({
+      queryArgs,
+      serialized:
+        typeof queryArgs == 'object'
+          ? serialize({ queryArgs, endpointDefinition, endpointName })
+          : queryArgs,
+    }),
+    [queryArgs, serialize, endpointDefinition, endpointName]
+  )
+  const cache = useRef(incoming)
+  useEffect(() => {
+    if (cache.current.serialized !== incoming.serialized) {
+      cache.current = incoming
+    }
+  }, [incoming])
+
+  return cache.current.serialized === incoming.serialized
+    ? cache.current.queryArgs
+    : queryArgs
+}

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

@@ -494,18 +494,19 @@ describe('hooks tests', () => {
 
       let { unmount } = render(<User />, { wrapper: storeRef.wrapper })
 
+      expect(screen.getByTestId('isFetching').textContent).toBe('false')
+
       // skipped queries do nothing by default, so we need to toggle that to get a cached result
       fireEvent.click(screen.getByText('change skip'))
 
       await waitFor(() =>
         expect(screen.getByTestId('isFetching').textContent).toBe('true')
       )
-      await waitFor(() =>
-        expect(screen.getByTestId('isFetching').textContent).toBe('false')
-      )
-      await waitFor(() =>
+
+      await waitFor(() => {
         expect(screen.getByTestId('amount').textContent).toBe('1')
-      )
+        expect(screen.getByTestId('isFetching').textContent).toBe('false')
+      })
 
       unmount()
 

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

@@ -156,12 +156,14 @@ describe('re-triggering behavior on arg change', () => {
     }
   })
 
-  test('re-trigger every time on deeper value changes', async () => {
+  test('re-triggers every time on deeper value changes', async () => {
+    const name = 'Tim'
+
     const { result, rerender, waitForNextUpdate } = renderHook(
       (props) => getUser.useQuery(props),
       {
         wrapper: withProvider(store),
-        initialProps: { person: { name: 'Tim' } },
+        initialProps: { person: { name } },
       }
     )
 
@@ -171,7 +173,7 @@ describe('re-triggering behavior on arg change', () => {
     expect(spy).toHaveBeenCalledTimes(1)
 
     for (let x = 1; x < 3; x++) {
-      rerender({ person: { name: 'Tim' } })
+      rerender({ person: { name: name + x } })
       // @ts-ignore
       while (result.current.status === 'pending') {
         await waitForNextUpdate()