@tanstack/react-query-persist-client 4.0.0

package/src/PersistQueryClientProvider.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+
+import { persistQueryClient, PersistQueryClientOptions } from './persist'
+import {
+  QueryClientProvider,
+  QueryClientProviderProps,
+  IsRestoringProvider,
+} from '@tanstack/react-query'
+
+export type PersistQueryClientProviderProps = QueryClientProviderProps & {
+  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  onSuccess?: () => void
+}
+
+export const PersistQueryClientProvider = ({
+  client,
+  children,
+  persistOptions,
+  onSuccess,
+  ...props
+}: PersistQueryClientProviderProps): JSX.Element => {
+  const [isRestoring, setIsRestoring] = React.useState(true)
+  const refs = React.useRef({ persistOptions, onSuccess })
+
+  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) {
+        refs.current.onSuccess?.()
+        setIsRestoring(false)
+      }
+    })
+
+    return () => {
+      isStale = true
+      unsubscribe()
+    }
+  }, [client])
+
+  return (
+    <QueryClientProvider client={client} {...props}>
+      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>
+    </QueryClientProvider>
+  )
+}

package/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -0,0 +1,538 @@
+import * as React from 'react'
+import { render, waitFor } from '@testing-library/react'
+
+import {
+  QueryClient,
+  useQuery,
+  UseQueryResult,
+  useQueries,
+  DefinedUseQueryResult,
+} from '@tanstack/react-query'
+import {
+  createQueryClient,
+  mockLogger,
+  queryKey,
+  sleep,
+} from '../../../../tests/utils'
+import { PersistedClient, Persister, persistQueryClientSave } from '../persist'
+import { PersistQueryClientProvider } from '../PersistQueryClientProvider'
+
+const createMockPersister = (): Persister => {
+  let storedState: PersistedClient | undefined
+
+  return {
+    async persistClient(persistClient: PersistedClient) {
+      storedState = persistClient
+    },
+    async restoreClient() {
+      await sleep(10)
+      return storedState
+    },
+    removeClient() {
+      storedState = undefined
+    },
+  }
+}
+
+const createMockErrorPersister = (
+  removeClient: Persister['removeClient'],
+): [Error, Persister] => {
+  const error = new Error('restore failed')
+  return [
+    error,
+    {
+      async persistClient() {
+        // noop
+      },
+      async restoreClient() {
+        await sleep(10)
+        throw error
+      },
+      removeClient,
+    },
+  ]
+}
+
+describe('PersistQueryClientProvider', () => {
+  test('restores cache from persister', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<string>[] = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery(key, async () => {
+        await sleep(10)
+        return 'fetched'
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    expect(states).toHaveLength(4)
+
+    expect(states[0]).toMatchObject({
+      status: 'loading',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[3]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  test('should also put useQueries into idle state', async () => {
+    const key = queryKey()
+    const states: UseQueryResult[] = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const [state] = useQueries({
+        queries: [
+          {
+            queryKey: key,
+            queryFn: async (): Promise<string> => {
+              await sleep(10)
+              return 'fetched'
+            },
+          },
+        ],
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    expect(states).toHaveLength(4)
+
+    expect(states[0]).toMatchObject({
+      status: 'loading',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[3]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  test('should show initialData while restoring', async () => {
+    const key = queryKey()
+    const states: DefinedUseQueryResult<string>[] = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery(
+        key,
+        async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+        {
+          initialData: 'initial',
+          // make sure that initial data is older than the hydration data
+          // otherwise initialData would be newer and takes precedence
+          initialDataUpdatedAt: 1,
+        },
+      )
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    await waitFor(() => rendered.getByText('initial'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    expect(states).toHaveLength(4)
+
+    expect(states[0]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'initial',
+    })
+
+    expect(states[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[3]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  test('should not refetch after restoring when data is fresh', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<string>[] = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery(
+        key,
+        async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+        {
+          staleTime: Infinity,
+        },
+      )
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>data: {state.data ?? 'null'}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    await waitFor(() => rendered.getByText('data: null'))
+    await waitFor(() => rendered.getByText('data: hydrated'))
+
+    expect(states).toHaveLength(2)
+
+    expect(states[0]).toMatchObject({
+      status: 'loading',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'hydrated',
+    })
+  })
+
+  test('should call onSuccess after successful restoring', async () => {
+    const key = queryKey()
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery(key, async () => {
+        await sleep(10)
+        return 'fetched'
+      })
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const onSuccess = jest.fn()
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+        onSuccess={onSuccess}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+    expect(onSuccess).toHaveBeenCalledTimes(0)
+
+    await waitFor(() => rendered.getByText('hydrated'))
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    await waitFor(() => rendered.getByText('fetched'))
+  })
+
+  test('should remove cache after non-successful restoring', async () => {
+    const key = queryKey()
+    jest.spyOn(console, 'warn').mockImplementation(() => undefined)
+    jest.spyOn(console, 'error').mockImplementation(() => undefined)
+
+    const queryClient = createQueryClient()
+    const removeClient = jest.fn()
+
+    const [error, persister] = createMockErrorPersister(removeClient)
+
+    function Page() {
+      const state = useQuery(key, async () => {
+        await sleep(10)
+        return 'fetched'
+      })
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    await waitFor(() => rendered.getByText('fetched'))
+    expect(removeClient).toHaveBeenCalledTimes(1)
+    expect(mockLogger.error).toHaveBeenCalledTimes(1)
+    expect(mockLogger.error).toHaveBeenCalledWith(error)
+  })
+
+  test('should be able to persist into multiple clients', async () => {
+    const key = queryKey()
+    const states: UseQueryResult[] = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery(key, () => Promise.resolve('hydrated'))
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const onSuccess = jest.fn()
+
+    const queryFn1 = jest.fn().mockImplementation(async () => {
+      await sleep(10)
+      return 'queryFn1'
+    })
+    const queryFn2 = jest.fn().mockImplementation(async () => {
+      await sleep(10)
+      return 'queryFn2'
+    })
+
+    function App() {
+      const [client, setClient] = React.useState(
+        () =>
+          new QueryClient({
+            defaultOptions: {
+              queries: {
+                queryFn: queryFn1,
+              },
+            },
+          }),
+      )
+
+      React.useEffect(() => {
+        setClient(
+          new QueryClient({
+            defaultOptions: {
+              queries: {
+                queryFn: queryFn2,
+              },
+            },
+          }),
+        )
+      }, [])
+
+      return (
+        <PersistQueryClientProvider
+          client={client}
+          persistOptions={{ persister }}
+          onSuccess={onSuccess}
+        >
+          <Page />
+        </PersistQueryClientProvider>
+      )
+    }
+
+    function Page() {
+      const state = useQuery(key)
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>{String(state.data)}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(<App />)
+
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('queryFn2'))
+
+    expect(queryFn1).toHaveBeenCalledTimes(0)
+    expect(queryFn2).toHaveBeenCalledTimes(1)
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+
+    expect(states).toHaveLength(5)
+
+    expect(states[0]).toMatchObject({
+      status: 'loading',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states[1]).toMatchObject({
+      status: 'loading',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[3]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states[4]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'queryFn2',
+    })
+  })
+})

package/src/__tests__/persist.test.tsx

@@ -0,0 +1,48 @@
+import { createQueryClient, sleep } from '../../../../tests/utils'
+import {
+  PersistedClient,
+  Persister,
+  persistQueryClientSubscribe,
+} from '../persist'
+
+const createMockPersister = (): Persister => {
+  let storedState: PersistedClient | undefined
+
+  return {
+    async persistClient(persistClient: PersistedClient) {
+      storedState = persistClient
+    },
+    async restoreClient() {
+      await sleep(10)
+      return storedState
+    },
+    removeClient() {
+      storedState = undefined
+    },
+  }
+}
+
+describe('persistQueryClientSubscribe', () => {
+  test('should persist mutations', async () => {
+    const queryClient = createQueryClient()
+
+    const persister = createMockPersister()
+
+    const unsubscribe = persistQueryClientSubscribe({
+      queryClient,
+      persister,
+      dehydrateOptions: { shouldDehydrateMutation: () => true },
+    })
+
+    queryClient.getMutationCache().build(queryClient, {
+      mutationFn: async (text: string) => text,
+      variables: 'todo',
+    })
+
+    const result = await persister.restoreClient()
+
+    expect(result?.clientState.mutations).toHaveLength(1)
+
+    unsubscribe()
+  })
+})

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './persist'
+export * from './PersistQueryClientProvider'
+export * from './retryStrategies'