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

package/src/__tests__/RemoveCache/Provider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import RemoveCache from './RemoveCache.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>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <RemoveCache {key} />
+</PersistQueryClientProvider>

package/src/__tests__/RemoveCache/RemoveCache.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__/RestoreCache/Provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import RestoreCache from './RestoreCache.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}>
+  <RestoreCache {key} {states} />
+</PersistQueryClientProvider>

package/src/__tests__/RestoreCache/RestoreCache.svelte

@@ -0,0 +1,34 @@
+<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'
+    },
+  })
+
+  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__/UseQueries/Provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import UseQueries from './UseQueries.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}>
+  <UseQueries {key} {states} />
+</PersistQueryClientProvider>

package/src/__tests__/UseQueries/UseQueries.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { createQueries } 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 = createQueries({
+    queries: [
+      {
+        queryKey: key,
+        queryFn: async (): Promise<string> => {
+          await sleep(10)
+          return 'fetched'
+        },
+      },
+    ],
+  })
+
+  let data = get(state)[0].data
+  let fetchStatus = get(state)[0].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__/utils.ts

@@ -0,0 +1,34 @@
+import { QueryClient } from '@tanstack/svelte-query'
+import { act } from '@testing-library/svelte'
+
+import type { QueryClientConfig } from '@tanstack/svelte-query'
+
+export function createQueryClient(config?: QueryClientConfig): QueryClient {
+  return new QueryClient(config)
+}
+
+let queryKeyCount = 0
+export function queryKey(): Array<string> {
+  queryKeyCount++
+  return [`query_${queryKeyCount}`]
+}
+
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}
+
+export function setActTimeout(fn: () => void, ms?: number) {
+  return setTimeout(() => {
+    act(() => {
+      fn()
+    })
+  }, ms)
+}
+
+export type StatusResult<T = unknown> = {
+  status: string
+  fetchStatus: string
+  data: T | undefined
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+// Re-export core
+export * from '@tanstack/query-persist-client-core'
+export { default as PersistQueryClientProvider } from './PersistQueryClientProvider.svelte'