dude

zhihengGet · Jul 17, 2024 · bc26e06 · bc26e06
1 parent 12b0ed8
commit bc26e06
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 85 deletions.
diff --git a/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte b/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
@@ -21,7 +21,6 @@
     client,
     children,
     persistOptions,
-    onSuccess,
     ...props
   }: PersistQueryClientProviderProps = $props()
 
@@ -39,12 +38,10 @@
   })
   $effect(() => {
     isRestoring = true
-    persistQueryClientRestore(options).then(() => {
+    persistQueryClientRestore(options).then(async () => {
       try {
-        console.log('restoring !', typeof isRestoring)
-        onSuccess?.()
+        await props.onSuccess?.()
       } finally {
-        console.log('restored')
         isRestoring = false
       }
     })

diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -2,30 +2,32 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
   import type { StatusResult } from '../utils'
+  import { untrack } from 'svelte'
 
-  let { key, states, fetched } = $props<{
+  let { key, states = $bindable() } = $props<{
     key: Array<string>
     states: Array<StatusResult<string>>
     fetched: boolean
   }>()
 
-  const state = createQuery({
+  const s = createQuery({
     queryKey: key,
     queryFn: async () => {
-      fetched.set(true)
-      await sleep(10)
+      states.push('fetched')
       return 'fetched'
     },
 
     staleTime: Infinity,
   })
-
   $effect(() => {
-    states = [...states, state]
+    JSON.stringify(s.data)
+    untrack(() => {
+      states.push($state.snapshot(s))
+    })
   })
 </script>
 
 <div>
-  <h1>data: {state.data ?? 'null'}</h1>
-  <h2>fetchStatus: {state.fetchStatus}</h2>
+  <h1>data: {s.data ?? 'null'}</h1>
+  <h2>fetchStatus: {s.fetchStatus}</h2>
 </div>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
@@ -5,13 +5,17 @@
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
   import type { StatusResult } from '../utils'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
-  export let states: Array<StatusResult<string>>
-  export let fetched: boolean
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    key: Array<string>
+    states: Array<StatusResult<string>>
+    fetched: boolean
+  }
+
+  let { queryClient, persistOptions, key, states, fetched }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <FreshData {key} {states} {fetched} />
+  <FreshData {key} bind:states {fetched} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -2,13 +2,14 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
   import type { StatusResult } from '../utils'
+  import { untrack } from 'svelte'
 
-  let { key, states } = $props<{
+  let { key, states = $bindable() } = $props<{
     key: Array<string>
     states: Array<StatusResult<string>>
   }>()
 
-  const state = createQuery({
+  const s = createQuery({
     queryKey: key,
     queryFn: async () => {
       await sleep(10)
@@ -22,11 +23,15 @@
   })
 
   $effect(() => {
-    states = [...states, state]
+    console.log('initial data', s)
+    JSON.stringify(s)
+    untrack(() => {
+      states.push($state.snapshot(s))
+    })
   })
 </script>
 
 <div>
-  <h1>{state.data}</h1>
-  <h2>fetchStatus: {state.fetchStatus}</h2>
+  <h1>{s.data}</h1>
+  <h2>fetchStatus: {s.fetchStatus}</h2>
 </div>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -5,12 +5,21 @@
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
   import type { StatusResult } from '../utils'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
-  export let states: Array<StatusResult<string>>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    key: Array<string>
+    states: Array<StatusResult<string>>
+  }
+
+  let {
+    queryClient,
+    persistOptions,
+    key,
+    states = $bindable(),
+  }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <InitialData {key} {states} />
+  <InitialData {key} bind:states />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
@@ -2,7 +2,11 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
 
-  export let key: Array<string>
+  interface Props {
+    key: Array<string>
+  }
+
+  let { key }: Props = $props()
 
   const state = createQuery({
     queryKey: key,

diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
@@ -4,10 +4,14 @@
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
-  export let onSuccess: () => void
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    key: Array<string>
+    onSuccess: () => void
+  }
+
+  let { queryClient, persistOptions, key, onSuccess }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>

diff --git a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.svelte.ts b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.svelte.ts
@@ -82,7 +82,7 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(4)
+    expect(states).toHaveLength(3)
 
     expect(states[0]).toMatchObject({
       status: 'pending',
@@ -98,15 +98,15 @@ describe('PersistQueryClientProvider', () => {
 
     expect(states[2]).toMatchObject({
       status: 'success',
-      fetchStatus: 'fetching',
-      data: 'hydrated',
+      fetchStatus: 'idle',
+      data: 'fetched',
     })
 
-    expect(states[3]).toMatchObject({
+    /* expect(states[3]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
-    })
+    }) */
   })
 
   test('should also put useQueries into idle state', async () => {
@@ -138,7 +138,7 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(4)
+    expect(states).toHaveLength(3)
 
     expect(states[0]).toMatchObject({
       status: 'pending',
@@ -153,12 +153,6 @@ describe('PersistQueryClientProvider', () => {
     })
 
     expect(states[2]).toMatchObject({
-      status: 'success',
-      fetchStatus: 'fetching',
-      data: 'hydrated',
-    })
-
-    expect(states[3]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -194,7 +188,7 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(4)
+    expect(states).toHaveLength(3)
 
     expect(states[0]).toMatchObject({
       status: 'success',
@@ -208,13 +202,13 @@ describe('PersistQueryClientProvider', () => {
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    /* expect(states[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
-    })
+    }) */
 
-    expect(states[3]).toMatchObject({
+    expect(states[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -255,7 +249,7 @@ describe('PersistQueryClientProvider', () => {
     expect(fetched).toBe(false)
 
     expect(states).toHaveLength(2)
-
+    console.log('statesa', states)
     expect(states[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
@@ -302,7 +296,7 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('fetched'))
   })
 
-  test.only('should await onSuccess after successful restoring', async () => {
+  test('should await onSuccess after successful restoring', async () => {
     const key = queryKey()
 
     const queryClient = createQueryClient()
@@ -335,6 +329,7 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
+    await sleep(400)
     expect(states).toEqual([
       'onSuccess',
       'onSuccess done',

diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
@@ -4,9 +4,13 @@
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    key: Array<string>
+  }
+
+  let { queryClient, persistOptions, key }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>

diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
@@ -2,7 +2,11 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
 
-  export let key: Array<string>
+  interface Props {
+    key: Array<string>
+  }
+
+  let { key }: Props = $props()
 
   const state = createQuery({
     queryKey: key,

diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
@@ -5,12 +5,21 @@
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
   import type { StatusResult } from '../utils'
 
-  export let queryClient: QueryClient
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
-  export let states: Array<StatusResult<string>>
+  interface Props {
+    queryClient: QueryClient
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    key: Array<string>
+    states: Array<StatusResult<string>>
+  }
+
+  let {
+    queryClient,
+    persistOptions,
+    key,
+    states = $bindable(),
+  }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <RestoreCache {key} {states} />
+  <RestoreCache {key} bind:states />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
@@ -2,13 +2,14 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
   import type { StatusResult } from '../utils'
+  import { untrack } from 'svelte'
 
   let { key, states } = $props<{
     key: Array<string>
     states: Array<StatusResult<string>>
   }>()
 
-  const state = createQuery({
+  const ss = createQuery({
     queryKey: key,
     queryFn: async () => {
       await sleep(10)
@@ -17,11 +18,15 @@
   })
 
   $effect(() => {
-    states = [...states, state]
+    console.log('initial data', ss)
+    JSON.stringify(ss)
+    untrack(() => {
+      states.push($state.snapshot(ss))
+    })
   })
 </script>
 
 <div>
-  <h1>{state.data}</h1>
-  <h2>fetchStatus: {state.fetchStatus}</h2>
+  <h1>{ss.data}</h1>
+  <h2>fetchStatus: {ss.fetchStatus}</h2>
 </div>