fix(react-query-persist-client): don't double-restore in StrictMode (#6020)

Author: TkDodo

packages/react-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -20,30 +20,31 @@ export const PersistQueryClientProvider = ({
 }: PersistQueryClientProviderProps): JSX.Element => {
   const [isRestoring, setIsRestoring] = React.useState(true)
   const refs = React.useRef({ persistOptions, onSuccess })
+  const didRestore = React.useRef(false)
 
   React.useEffect(() => {
     refs.current = { persistOptions, onSuccess }
   })
 
   React.useEffect(() => {
-    let isStale = false
-    setIsRestoring(true)
-    const [unsubscribe, promise] = persistQueryClient({
-      ...refs.current.persistOptions,
-      queryClient: client,
-    })
-
-    promise.then(() => {
-      if (!isStale) {
+    if (!didRestore.current) {
+      didRestore.current = true
+      setIsRestoring(true)
+      const [unsubscribe, promise] = persistQueryClient({
+        ...refs.current.persistOptions,
+        queryClient: client,
+      })
+
+      promise.then(() => {
         refs.current.onSuccess?.()
         setIsRestoring(false)
-      }
-    })
+      })
 
-    return () => {
-      isStale = true
-      unsubscribe()
+      return () => {
+        unsubscribe()
+      }
     }
+    return undefined
   }, [client])
 
   return (

packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -538,4 +538,74 @@ describe('PersistQueryClientProvider', () => {
       data: 'queryFn2',
     })
   })
+
+  test('should only restore once in StrictMode', async () => {
+    let restoreCount = 0
+    const createPersister = (): Persister => {
+      let storedState: PersistedClient | undefined
+
+      return {
+        async persistClient(persistClient) {
+          storedState = persistClient
+        },
+        async restoreClient() {
+          restoreCount++
+          await sleep(10)
+          return storedState
+        },
+        removeClient() {
+          storedState = undefined
+        },
+      }
+    }
+
+    const key = queryKey()
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createPersister()
+
+    const onSuccess = jest.fn()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+      })
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <React.StrictMode>
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister }}
+          onSuccess={onSuccess}
+        >
+          <Page />
+        </PersistQueryClientProvider>
+      </React.StrictMode>,
+    )
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    expect(restoreCount).toBe(1)
+  })
 })