snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+  import { StatelessRef } from '../utils.svelte.js'
+
+  let { states }: { states: StatelessRef<Array<string>> } = $props()
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: async () => {
+      states.current.push('fetching')
+      await sleep(10)
+      states.current.push('fetched')
+      return 'fetched'
+    },
+  }))
+</script>
+
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>

packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import AwaitOnSuccess from './AwaitOnSuccess.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import { StatelessRef } from '../utils.svelte'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess: () => Promise<void>
+    states: StatelessRef<Array<string>>
+  }
+
+  let { queryClient, persistOptions, onSuccess, states }: Props = $props()
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
+  <AwaitOnSuccess {states} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  let {
+    states,
+    onFetch,
+  }: {
+    states: StatelessRef<Array<StatusResult<string>>>
+    onFetch: () => void
+  } = $props()
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: async () => {
+      await sleep(10)
+      onFetch()
+      return 'fetched'
+    },
+    staleTime: Infinity,
+  }))
+
+  $effect(() => {
+    const snapshot = $state.snapshot(query)
+    states.current.push(snapshot)
+  })
+</script>
+
+<div>data: {query.data ?? 'null'}</div>
+<div>fetchStatus: {query.fetchStatus}</div>

packages/svelte-query-persist-client/tests/FreshData/Provider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import FreshData from './FreshData.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: StatelessRef<Array<StatusResult<string>>>
+    onFetch: () => void
+  }
+
+  let { queryClient, persistOptions, states, onFetch }: Props = $props()
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <FreshData {states} {onFetch} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  let { states }: { states: StatelessRef<Array<StatusResult<string>>> } =
+    $props()
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => sleep(10).then(() => 'fetched'),
+    initialData: 'initial',
+    // make sure that initial data is older than the hydration data
+    // otherwise initialData would be newer and takes precedence
+    initialDataUpdatedAt: 1,
+  }))
+
+  $effect(() => {
+    const snapshot = $state.snapshot(query)
+    states.current.push(snapshot)
+  })
+</script>
+
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>

packages/svelte-query-persist-client/tests/InitialData/Provider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import InitialData from './InitialData.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: StatelessRef<Array<StatusResult<string>>>
+  }
+
+  let { queryClient, persistOptions, states }: Props = $props()
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <InitialData {states} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => sleep(10).then(() => 'fetched'),
+  }))
+</script>
+
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>

packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import OnSuccess from './OnSuccess.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess: () => void
+  }
+
+  let { queryClient, persistOptions, onSuccess }: Props = $props()
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
+  <OnSuccess />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts

@@ -0,0 +1,390 @@
+import { render } from '@testing-library/svelte'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { QueryClient, noop } from '@tanstack/svelte-query'
+import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
+import { sleep } from '@tanstack/query-test-utils'
+import AwaitOnSuccess from './AwaitOnSuccess/Provider.svelte'
+import FreshData from './FreshData/Provider.svelte'
+import OnSuccess from './OnSuccess/Provider.svelte'
+import InitialData from './InitialData/Provider.svelte'
+import RemoveCache from './RemoveCache/Provider.svelte'
+import RestoreCache from './RestoreCache/Provider.svelte'
+import UseQueries from './UseQueries/Provider.svelte'
+import { StatelessRef } from './utils.svelte.js'
+import type {
+  PersistedClient,
+  Persister,
+} from '@tanstack/query-persist-client-core'
+import type { StatusResult } from './utils.svelte.js'
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+const createMockPersister = (): Persister => {
+  let storedState: PersistedClient | undefined
+
+  return {
+    persistClient(persistClient: PersistedClient) {
+      storedState = persistClient
+    },
+    async restoreClient() {
+      return sleep(10).then(() => storedState)
+    },
+    removeClient() {
+      storedState = undefined
+    },
+  }
+}
+
+const createMockErrorPersister = (
+  removeClient: Persister['removeClient'],
+): [Error, Persister] => {
+  const error = new Error('restore failed')
+  return [
+    error,
+    {
+      async persistClient() {
+        // noop
+      },
+      async restoreClient() {
+        return sleep(10).then(() => Promise.reject(error))
+      },
+      removeClient,
+    },
+  ]
+}
+
+describe('PersistQueryClientProvider', () => {
+  it('restores cache from persister', async () => {
+    const states = new StatelessRef<Array<StatusResult<string>>>([])
+
+    const queryClient = new QueryClient()
+    void queryClient
+      .query({
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'hydrated'),
+      })
+      .catch(noop)
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    const rendered = render(RestoreCache, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        states,
+      },
+    })
+
+    expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('hydrated')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+
+    expect(states.current).toHaveLength(3)
+
+    expect(states.current[0]).toMatchObject({
+      status: 'pending',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states.current[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states.current[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  it('should also put useQueries into idle state', async () => {
+    const states = new StatelessRef<Array<StatusResult<string>>>([])
+
+    const queryClient = new QueryClient()
+    void queryClient
+      .query({
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'hydrated'),
+      })
+      .catch(noop)
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    const rendered = render(UseQueries, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        states,
+      },
+    })
+
+    expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('hydrated')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+
+    expect(states.current).toHaveLength(3)
+
+    expect(states.current[0]).toMatchObject({
+      status: 'pending',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states.current[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states.current[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  it('should show initialData while restoring', async () => {
+    const states = new StatelessRef<Array<StatusResult<string>>>([])
+
+    const queryClient = new QueryClient()
+    void queryClient
+      .query({
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'hydrated'),
+      })
+      .catch(noop)
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    const rendered = render(InitialData, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        states,
+      },
+    })
+
+    expect(rendered.getByText('initial')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('hydrated')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+
+    expect(states.current).toHaveLength(3)
+
+    expect(states.current[0]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'initial',
+    })
+
+    expect(states.current[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'fetching',
+      data: 'hydrated',
+    })
+
+    expect(states.current[2]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  it('should not refetch after restoring when data is fresh', async () => {
+    const states = new StatelessRef<Array<StatusResult<string>>>([])
+
+    const queryClient = new QueryClient()
+    void queryClient
+      .query({
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'hydrated'),
+      })
+      .catch(noop)
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    let fetched = false
+
+    const rendered = render(FreshData, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        states,
+        onFetch: () => {
+          fetched = true
+        },
+      },
+    })
+
+    expect(rendered.getByText('data: null')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('data: hydrated')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('data: hydrated')).toBeInTheDocument()
+
+    expect(states.current).toHaveLength(2)
+
+    expect(fetched).toBe(false)
+
+    expect(states.current[0]).toMatchObject({
+      status: 'pending',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(states.current[1]).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'hydrated',
+    })
+  })
+
+  it('should call onSuccess after successful restoring', async () => {
+    const queryClient = new QueryClient()
+    void queryClient
+      .query({
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'hydrated'),
+      })
+      .catch(noop)
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    const onSuccess = vi.fn()
+
+    const rendered = render(OnSuccess, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        onSuccess,
+      },
+    })
+
+    expect(onSuccess).toHaveBeenCalledTimes(0)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('hydrated')).toBeInTheDocument()
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+  })
+
+  it('should await onSuccess after successful restoring', async () => {
+    const queryClient = new QueryClient()
+    void queryClient
+      .query({
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'hydrated'),
+      })
+      .catch(noop)
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    const states = new StatelessRef<Array<string>>([])
+
+    const rendered = render(AwaitOnSuccess, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        states,
+        onSuccess: async () => {
+          states.current.push('onSuccess')
+          await sleep(5)
+          states.current.push('onSuccess done')
+        },
+      },
+    })
+
+    await vi.advanceTimersByTimeAsync(15)
+    expect(rendered.getByText('hydrated')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+
+    expect(states.current).toEqual([
+      'onSuccess',
+      'onSuccess done',
+      'fetching',
+      'fetched',
+    ])
+  })
+
+  it('should remove cache after non-successful restoring', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const consoleWarn = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => undefined)
+
+    const queryClient = new QueryClient()
+    const removeClient = vi.fn()
+    const onSuccess = vi.fn()
+    const onError = vi.fn()
+
+    const [error, persister] = createMockErrorPersister(removeClient)
+
+    const rendered = render(RemoveCache, {
+      props: { queryClient, persistOptions: { persister }, onError, onSuccess },
+    })
+
+    await vi.advanceTimersByTimeAsync(10)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+    expect(removeClient).toHaveBeenCalledTimes(1)
+    expect(onSuccess).toHaveBeenCalledTimes(0)
+    expect(onError).toHaveBeenCalledTimes(1)
+    expect(consoleMock).toHaveBeenCalledTimes(1)
+    expect(consoleMock).toHaveBeenNthCalledWith(1, error)
+    consoleMock.mockRestore()
+    consoleWarn.mockRestore()
+  })
+})

packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import RemoveCache from './RemoveCache.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess: () => void
+    onError: () => void
+  }
+
+  let { queryClient, persistOptions, onError, onSuccess }: Props = $props()
+</script>
+
+<PersistQueryClientProvider
+  client={queryClient}
+  {persistOptions}
+  {onSuccess}
+  {onError}
+>
+  <RemoveCache />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => sleep(10).then(() => 'fetched'),
+  }))
+</script>
+
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>

packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import RestoreCache from './RestoreCache.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: StatelessRef<Array<StatusResult<string>>>
+  }
+
+  let { queryClient, persistOptions, states }: Props = $props()
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <RestoreCache {states} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  let { states }: { states: StatelessRef<Array<StatusResult<string>>> } =
+    $props()
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: () => sleep(10).then(() => 'fetched'),
+  }))
+
+  $effect(() => {
+    const snapshot = $state.snapshot(query)
+    states.current.push(snapshot)
+  })
+</script>
+
+<div>{query.data}</div>
+<div>fetchStatus: {query.fetchStatus}</div>

packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../src/PersistQueryClientProvider.svelte'
+  import UseQueries from './UseQueries.svelte'
+  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    states: StatelessRef<Array<StatusResult<string>>>
+  }
+
+  let { queryClient, persistOptions, states }: Props = $props()
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <UseQueries {states} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { createQueries } from '@tanstack/svelte-query'
+  import { sleep } from '@tanstack/query-test-utils'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
+
+  let { states }: { states: StatelessRef<Array<StatusResult<string>>> } =
+    $props()
+
+  const queries = createQueries(() => ({
+    queries: [
+      {
+        queryKey: ['test'],
+        queryFn: () => sleep(10).then(() => 'fetched'),
+      },
+    ],
+  }))
+
+  $effect(() => {
+    const snapshot = $state.snapshot(queries[0])
+    states.current.push(snapshot)
+  })
+</script>
+
+<div>{queries[0].data}</div>
+<div>fetchStatus: {queries[0].fetchStatus}</div>

packages/svelte-query-persist-client/tests/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

packages/svelte-query-persist-client/tests/utils.svelte.ts

@@ -0,0 +1,12 @@
+export type StatusResult<T = unknown> = {
+  status: string
+  fetchStatus: string
+  data: T | undefined
+}
+
+export class StatelessRef<T> {
+  current: T
+  constructor(value: T) {
+    this.current = value
+  }
+}