@tanstack/svelte-query-persist-client 5.0.0-beta.26

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tanstack/svelte-query-persist-client",
+  "version": "5.0.0-beta.26",
+  "description": "Svelte bindings to work with persisters in TanStack/svelte-query",
+  "author": "Lachlan Collins",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "5.0.0-beta.23"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/svelte": "^4.0.3",
+    "eslint-plugin-svelte": "^2.32.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
+    "@tanstack/svelte-query": "5.0.0-beta.26"
+  },
+  "peerDependencies": {
+    "svelte": ">=3 <5",
+    "@tanstack/svelte-query": "^5.0.0-beta.26"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:eslint": "eslint --ext .svelte,.ts ./src",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist"
+  }
+}

package/src/PersistQueryClientProvider.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { persistQueryClient } from '@tanstack/query-persist-client-core'
+  import {
+    QueryClientProvider,
+    setIsRestoringContext,
+  } from '@tanstack/svelte-query'
+  import { writable } from 'svelte/store'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { QueryClient } from '@tanstack/svelte-query'
+
+  export let client: QueryClient
+  export let onSuccess: () => Promise<unknown> | unknown = () => undefined
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+
+  const isRestoring = writable(true)
+  setIsRestoringContext(isRestoring)
+  $: {
+    let isStale = false
+    isRestoring.set(true)
+    const [unsubscribe, promise] = persistQueryClient({
+      ...persistOptions,
+      queryClient: client,
+    })
+    promise.then(async () => {
+      if (!isStale) {
+        try {
+          await onSuccess()
+        } finally {
+          isRestoring.set(false)
+        }
+      }
+    })
+    onDestroy(() => {
+      isStale = true
+      unsubscribe()
+    })
+  }
+</script>
+
+<QueryClientProvider {client}>
+  <slot />
+</QueryClientProvider>

package/src/__tests__/AwaitOnSuccess/AwaitOnSuccess.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+  import type { Writable } from 'svelte/store'
+
+  export let key: Array<string>
+  export let states: Writable<Array<string>>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      states.update((s) => [...s, 'fetching'])
+      await sleep(10)
+      states.update((s) => [...s, 'fetched'])
+      return 'fetched'
+    },
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>{data}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

package/src/__tests__/AwaitOnSuccess/Provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import AwaitOnSuccess from './AwaitOnSuccess.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { Writable } from 'svelte/store'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let onSuccess: () => Promise<void>
+  export let states: Writable<Array<string>>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
+  <AwaitOnSuccess {key} {states} />
+</PersistQueryClientProvider>

package/src/__tests__/FreshData/FreshData.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+  export let fetched: Writable<boolean>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      fetched.set(true)
+      await sleep(10)
+      return 'fetched'
+    },
+
+    staleTime: Infinity,
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    states.update((prev) => [
+      ...prev,
+      { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
+    ])
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>data: {data ?? 'null'}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

package/src/__tests__/FreshData/Provider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import FreshData from './FreshData.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+  export let fetched: Writable<boolean>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <FreshData {key} {states} {fetched} />
+</PersistQueryClientProvider>

package/src/__tests__/InitialData/InitialData.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: 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,
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    states.update((prev) => [
+      ...prev,
+      { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
+    ])
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>{data}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

package/src/__tests__/InitialData/Provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import InitialData from './InitialData.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <InitialData {key} {states} />
+</PersistQueryClientProvider>

package/src/__tests__/OnSuccess/OnSuccess.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+
+  export let key: Array<string>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      await sleep(10)
+      return 'fetched'
+    },
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>{data}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

package/src/__tests__/OnSuccess/Provider.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import OnSuccess from './OnSuccess.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let onSuccess: () => void
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
+  <OnSuccess {key} />
+</PersistQueryClientProvider>

package/src/__tests__/PersistQueryClientProvider.test.ts

@@ -0,0 +1,377 @@
+import { render, waitFor } from '@testing-library/svelte'
+import { describe, expect, test, vi } from 'vitest'
+import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
+import { get, writable } from 'svelte/store'
+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 { createQueryClient, queryKey, sleep } from './utils'
+
+import type {
+  PersistedClient,
+  Persister,
+} from '@tanstack/query-persist-client-core'
+import type { Writable } from 'svelte/store'
+import type { StatusResult } from './utils'
+
+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: Writable<Array<StatusResult<string>>> = writable([])
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const rendered = render(RestoreCache, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        key,
+        states,
+      },
+    })
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    const states_ = get(states)
+    expect(states_).toHaveLength(4)
+
+    expect(states_[0]).toMatchObject({
+      status: 'pending',
+      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: Writable<Array<StatusResult<string>>> = writable([])
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const rendered = render(UseQueries, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        key,
+        states,
+      },
+    })
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    const states_ = get(states)
+
+    expect(states_).toHaveLength(4)
+
+    expect(states_[0]).toMatchObject({
+      status: 'pending',
+      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: Writable<Array<StatusResult<string>>> = writable([])
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const rendered = render(InitialData, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        key,
+        states,
+      },
+    })
+
+    await waitFor(() => rendered.getByText('initial'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    const states_ = get(states)
+    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: Writable<Array<StatusResult<string>>> = writable([])
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const fetched = writable(false)
+
+    const rendered = render(FreshData, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        key,
+        states,
+        fetched,
+      },
+    })
+
+    await waitFor(() => rendered.getByText('data: null'))
+    await waitFor(() => rendered.getByText('data: hydrated'))
+
+    const states_ = get(states)
+    expect(states_).toHaveLength(2)
+
+    expect(get(fetched)).toBe(false)
+
+    expect(states_[0]).toMatchObject({
+      status: 'pending',
+      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({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const onSuccess = vi.fn()
+
+    const rendered = render(OnSuccess, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        key,
+        onSuccess,
+      },
+    })
+
+    expect(onSuccess).toHaveBeenCalledTimes(0)
+
+    await waitFor(() => rendered.getByText('hydrated'))
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    await waitFor(() => rendered.getByText('fetched'))
+  })
+
+  test('should await onSuccess after successful restoring', async () => {
+    const key = queryKey()
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    const states: Writable<Array<string>> = writable([])
+
+    const rendered = render(AwaitOnSuccess, {
+      props: {
+        queryClient,
+        persistOptions: { persister },
+        key,
+        states,
+        onSuccess: async () => {
+          states.update((s) => [...s, 'onSuccess'])
+          await sleep(20)
+          states.update((s) => [...s, 'onSuccess done'])
+        },
+      },
+    })
+
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+    expect(get(states)).toEqual([
+      'onSuccess',
+      'onSuccess done',
+      'fetching',
+      'fetched',
+    ])
+  })
+
+  test('should remove cache after non-successful restoring', async () => {
+    const key = queryKey()
+    const consoleMock = vi.spyOn(console, 'error')
+    const consoleWarn = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => undefined)
+    consoleMock.mockImplementation(() => undefined)
+
+    const queryClient = createQueryClient()
+    const removeClient = vi.fn()
+
+    const [error, persister] = createMockErrorPersister(removeClient)
+
+    const rendered = render(RemoveCache, {
+      props: { queryClient, persistOptions: { persister }, key },
+    })
+
+    await waitFor(() => rendered.getByText('fetched'))
+    expect(removeClient).toHaveBeenCalledTimes(1)
+    expect(consoleMock).toHaveBeenCalledTimes(1)
+    expect(consoleMock).toHaveBeenNthCalledWith(1, error)
+    consoleMock.mockRestore()
+    consoleWarn.mockRestore()
+  })
+})