temp

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

Hide file tree

Showing 13 changed files with 66 additions and 36 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,8 +2,9 @@
   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
@@ -12,7 +13,7 @@
   const state = createQuery({
     queryKey: key,
     queryFn: async () => {
-      fetched.set(true)
+      states.push('fetched')
       await sleep(10)
       return 'fetched'
     },
@@ -21,7 +22,10 @@
   })
 
   $effect(() => {
-    states = [...states, state]
+    console.log('abdeff', state)
+    untrack(() => {
+      states.push(state.data)
+    })
   })
 </script>
 

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
@@ -3,7 +3,7 @@
   import { sleep } from '../utils'
   import type { StatusResult } from '../utils'
 
-  let { key, states } = $props<{
+  let { key, states = $bindable() } = $props<{
     key: Array<string>
     states: Array<StatusResult<string>>
   }>()

diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -5,10 +5,14 @@
   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 }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>

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
@@ -221,7 +221,7 @@ describe('PersistQueryClientProvider', () => {
     })
   })
 
-  test('should not refetch after restoring when data is fresh', async () => {
+  test.only('should not refetch after restoring when data is fresh', async () => {
     const key = queryKey()
     const states: Array<StatusResult<string>> = $state([])
 
@@ -302,7 +302,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 +335,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,10 +5,14 @@
   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 }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>

diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
@@ -3,7 +3,7 @@
   import { sleep } from '../utils'
   import type { StatusResult } from '../utils'
 
-  let { key, states } = $props<{
+  let { key, states = $bindable() } = $props<{
     key: Array<string>
     states: Array<StatusResult<string>>
   }>()

diff --git a/packages/svelte-query-persist-client/vite.config.ts b/packages/svelte-query-persist-client/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    include: ['**/*.test.svelte.ts'],
+    include: ['**/*.svelte.ts'],
     environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
     coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },