diff --git a/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx b/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx index ac6ee41428..cd8c306a97 100644 --- a/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx +++ b/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 ( diff --git a/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx b/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx index 0dc4bb843c..bf6b1a814a 100644 --- a/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx +++ b/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 ( +