@tanstack/solid-query-persist-client 5.0.0-beta.21

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/dev.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var queryPersistClientCore = require('@tanstack/query-persist-client-core');
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidQuery = require('@tanstack/solid-query');
+
+// src/index.ts
+exports.PersistQueryClientProvider = (props) => {
+  const [isRestoring, setIsRestoring] = solidJs.createSignal(true);
+  let unsub;
+  solidJs.createComputed((cleanup) => {
+    cleanup?.();
+    let isStale = false;
+    setIsRestoring(true);
+    const [unsubscribe, promise] = queryPersistClientCore.persistQueryClient({
+      ...props.persistOptions,
+      queryClient: props.client
+    });
+    promise.then(async () => {
+      if (isStale)
+        return;
+      try {
+        await props.onSuccess?.();
+      } finally {
+        setIsRestoring(false);
+      }
+    });
+    unsub = () => {
+      isStale = true;
+      unsubscribe();
+    };
+    return unsub;
+  });
+  solidJs.onCleanup(() => unsub?.());
+  return web.createComponent(solidQuery.QueryClientProvider, {
+    get client() {
+      return props.client;
+    },
+    get children() {
+      return web.createComponent(solidQuery.IsRestoringProvider, {
+        value: isRestoring,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+};
+
+Object.keys(queryPersistClientCore).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return queryPersistClientCore[k]; }
+  });
+});

package/build/dev.js

@@ -0,0 +1,50 @@
+import { persistQueryClient } from '@tanstack/query-persist-client-core';
+export * from '@tanstack/query-persist-client-core';
+import { createComponent } from 'solid-js/web';
+import { createSignal, createComputed, onCleanup } from 'solid-js';
+import { QueryClientProvider, IsRestoringProvider } from '@tanstack/solid-query';
+
+// src/index.ts
+var PersistQueryClientProvider = (props) => {
+  const [isRestoring, setIsRestoring] = createSignal(true);
+  let unsub;
+  createComputed((cleanup) => {
+    cleanup?.();
+    let isStale = false;
+    setIsRestoring(true);
+    const [unsubscribe, promise] = persistQueryClient({
+      ...props.persistOptions,
+      queryClient: props.client
+    });
+    promise.then(async () => {
+      if (isStale)
+        return;
+      try {
+        await props.onSuccess?.();
+      } finally {
+        setIsRestoring(false);
+      }
+    });
+    unsub = () => {
+      isStale = true;
+      unsubscribe();
+    };
+    return unsub;
+  });
+  onCleanup(() => unsub?.());
+  return createComponent(QueryClientProvider, {
+    get client() {
+      return props.client;
+    },
+    get children() {
+      return createComponent(IsRestoringProvider, {
+        value: isRestoring,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+};
+
+export { PersistQueryClientProvider };

package/build/index.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var queryPersistClientCore = require('@tanstack/query-persist-client-core');
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidQuery = require('@tanstack/solid-query');
+
+// src/index.ts
+exports.PersistQueryClientProvider = (props) => {
+  const [isRestoring, setIsRestoring] = solidJs.createSignal(true);
+  let unsub;
+  solidJs.createComputed((cleanup) => {
+    cleanup?.();
+    let isStale = false;
+    setIsRestoring(true);
+    const [unsubscribe, promise] = queryPersistClientCore.persistQueryClient({
+      ...props.persistOptions,
+      queryClient: props.client
+    });
+    promise.then(async () => {
+      if (isStale)
+        return;
+      try {
+        await props.onSuccess?.();
+      } finally {
+        setIsRestoring(false);
+      }
+    });
+    unsub = () => {
+      isStale = true;
+      unsubscribe();
+    };
+    return unsub;
+  });
+  solidJs.onCleanup(() => unsub?.());
+  return web.createComponent(solidQuery.QueryClientProvider, {
+    get client() {
+      return props.client;
+    },
+    get children() {
+      return web.createComponent(solidQuery.IsRestoringProvider, {
+        value: isRestoring,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+};
+
+Object.keys(queryPersistClientCore).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return queryPersistClientCore[k]; }
+  });
+});

package/build/index.d.cts

@@ -0,0 +1,12 @@
+import { PersistQueryClientOptions } from '@tanstack/query-persist-client-core';
+export * from '@tanstack/query-persist-client-core';
+import { QueryClientProviderProps } from '@tanstack/solid-query';
+import { JSX } from 'solid-js';
+
+type PersistQueryClientProviderProps = QueryClientProviderProps & {
+    persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>;
+    onSuccess?: () => void;
+};
+declare const PersistQueryClientProvider: (props: PersistQueryClientProviderProps) => JSX.Element;
+
+export { PersistQueryClientProvider, PersistQueryClientProviderProps };

package/build/index.d.ts

@@ -0,0 +1,12 @@
+import { PersistQueryClientOptions } from '@tanstack/query-persist-client-core';
+export * from '@tanstack/query-persist-client-core';
+import { QueryClientProviderProps } from '@tanstack/solid-query';
+import { JSX } from 'solid-js';
+
+type PersistQueryClientProviderProps = QueryClientProviderProps & {
+    persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>;
+    onSuccess?: () => void;
+};
+declare const PersistQueryClientProvider: (props: PersistQueryClientProviderProps) => JSX.Element;
+
+export { PersistQueryClientProvider, PersistQueryClientProviderProps };

package/build/index.js

@@ -0,0 +1,50 @@
+import { persistQueryClient } from '@tanstack/query-persist-client-core';
+export * from '@tanstack/query-persist-client-core';
+import { createComponent } from 'solid-js/web';
+import { createSignal, createComputed, onCleanup } from 'solid-js';
+import { QueryClientProvider, IsRestoringProvider } from '@tanstack/solid-query';
+
+// src/index.ts
+var PersistQueryClientProvider = (props) => {
+  const [isRestoring, setIsRestoring] = createSignal(true);
+  let unsub;
+  createComputed((cleanup) => {
+    cleanup?.();
+    let isStale = false;
+    setIsRestoring(true);
+    const [unsubscribe, promise] = persistQueryClient({
+      ...props.persistOptions,
+      queryClient: props.client
+    });
+    promise.then(async () => {
+      if (isStale)
+        return;
+      try {
+        await props.onSuccess?.();
+      } finally {
+        setIsRestoring(false);
+      }
+    });
+    unsub = () => {
+      isStale = true;
+      unsubscribe();
+    };
+    return unsub;
+  });
+  onCleanup(() => unsub?.());
+  return createComponent(QueryClientProvider, {
+    get client() {
+      return props.client;
+    },
+    get children() {
+      return createComponent(IsRestoringProvider, {
+        value: isRestoring,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+};
+
+export { PersistQueryClientProvider };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@tanstack/solid-query-persist-client",
+  "version": "5.0.0-beta.21",
+  "description": "Solid.js bindings to work with persisters in TanStack/solid-query",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/query.git",
+    "directory": "packages/solid-query-persist-client"
+  },
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "./build/index.d.ts",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "exports": {
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
+      },
+      "require": {
+        "types": "./build/index.d.cts",
+        "default": "./build/dev.cjs"
+      }
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "require": {
+      "types": "./build/index.d.cts",
+      "default": "./build/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "5.0.0-beta.20"
+  },
+  "devDependencies": {
+    "tsup-preset-solid": "^2.0.1",
+    "vite-plugin-solid": "^2.7.0",
+    "solid-js": "^1.7.8"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.6.0",
+    "@tanstack/solid-query": "5.0.0-beta.21"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "vitest watch --coverage",
+    "test:build": "publint --strict",
+    "build": "tsup"
+  }
+}

package/src/PersistQueryClientProvider.tsx

@@ -0,0 +1,52 @@
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createComputed, createSignal, onCleanup } from 'solid-js'
+import { IsRestoringProvider, QueryClientProvider } from '@tanstack/solid-query'
+import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+import type { QueryClientProviderProps } from '@tanstack/solid-query'
+import type { JSX } from 'solid-js'
+
+export type PersistQueryClientProviderProps = QueryClientProviderProps & {
+  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  onSuccess?: () => void
+}
+
+export const PersistQueryClientProvider = (
+  props: PersistQueryClientProviderProps,
+): JSX.Element => {
+  const [isRestoring, setIsRestoring] = createSignal(true)
+
+  let unsub: undefined | (() => void)
+  createComputed<() => void>((cleanup) => {
+    cleanup?.()
+    let isStale = false
+    setIsRestoring(true)
+    const [unsubscribe, promise] = persistQueryClient({
+      ...props.persistOptions,
+      queryClient: props.client,
+    })
+
+    promise.then(async () => {
+      if (isStale) return
+      try {
+        await props.onSuccess?.()
+      } finally {
+        setIsRestoring(false)
+      }
+    })
+
+    unsub = () => {
+      isStale = true
+      unsubscribe()
+    }
+    return unsub
+  })
+
+  onCleanup(() => unsub?.())
+  return (
+    <QueryClientProvider client={props.client}>
+      <IsRestoringProvider value={isRestoring}>
+        {props.children}
+      </IsRestoringProvider>
+    </QueryClientProvider>
+  )
+}

package/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -0,0 +1,582 @@
+import '@testing-library/jest-dom'
+import { render, screen, waitFor } from '@solidjs/testing-library'
+import { QueryClient, createQueries, createQuery } from '@tanstack/solid-query'
+import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
+import { createEffect, createSignal, onMount } from 'solid-js'
+
+import { PersistQueryClientProvider } from '../PersistQueryClientProvider'
+import { createQueryClient, queryKey, sleep } from './utils'
+import type {
+  PersistedClient,
+  Persister,
+} from '@tanstack/query-persist-client-core'
+
+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: Array<{
+      status: string
+      fetchStatus: string
+      data: string | undefined
+    }> = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+      }))
+      createEffect(() =>
+        states.push({
+          status: state.status,
+          fetchStatus: state.fetchStatus,
+          data: state.data,
+        }),
+      )
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    render(() => (
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('fetchStatus: idle'))
+    await waitFor(() => screen.getByText('hydrated'))
+    await waitFor(() => screen.getByText('fetched'))
+
+    expect(states).toHaveLength(3)
+
+    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: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  test('should also put useQueries into idle state', async () => {
+    const key = queryKey()
+    const states: Array<{
+      status: string
+      fetchStatus: string
+      data: string | undefined
+    }> = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const [state] = createQueries(() => ({
+        queries: [
+          {
+            queryKey: key,
+            queryFn: async (): Promise<string> => {
+              await sleep(10)
+              return 'fetched'
+            },
+          },
+        ] as const,
+      }))
+
+      createEffect(() =>
+        states.push({
+          status: state.status,
+          fetchStatus: state.fetchStatus,
+          data: state.data,
+        }),
+      )
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    render(() => (
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('fetchStatus: idle'))
+    await waitFor(() => screen.getByText('hydrated'))
+    await waitFor(() => screen.getByText('fetched'))
+
+    expect(states).toHaveLength(3)
+
+    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: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  test('should show initialData while restoring', async () => {
+    const key = queryKey()
+    const states: Array<{
+      status: string
+      fetchStatus: string
+      data: string | undefined
+    }> = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      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,
+      }))
+
+      createEffect(() =>
+        states.push({
+          status: state.status,
+          fetchStatus: state.fetchStatus,
+          data: state.data,
+        }),
+      )
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    render(() => (
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('initial'))
+    await waitFor(() => screen.getByText('hydrated'))
+    await waitFor(() => screen.getByText('fetched'))
+
+    expect(states).toHaveLength(3)
+
+    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: 'idle',
+      data: 'fetched',
+    })
+  })
+
+  test('should not refetch after restoring when data is fresh', async () => {
+    const key = queryKey()
+    const states: Array<{
+      status: string
+      fetchStatus: string
+      data: string | undefined
+    }> = []
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createMockPersister()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    let fetched = false
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          fetched = true
+          await sleep(10)
+          return 'fetched'
+        },
+        staleTime: Infinity,
+      }))
+
+      createEffect(
+        () =>
+          states.push({
+            status: state.status,
+            fetchStatus: state.fetchStatus,
+            data: state.data,
+          }),
+        console.log(state.data),
+      )
+
+      return (
+        <div>
+          <h1>data: {state.data ?? 'null'}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    render(() => (
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('data: null'))
+    await waitFor(() => screen.getByText('data: hydrated'))
+
+    expect(states).toHaveLength(2)
+
+    expect(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()
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+      }))
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const onSuccess = vi.fn()
+
+    render(() => (
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+        onSuccess={onSuccess}
+      >
+        <Page />
+      </PersistQueryClientProvider>
+    ))
+    expect(onSuccess).toHaveBeenCalledTimes(0)
+
+    await waitFor(() => screen.getByText('hydrated'))
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    await waitFor(() => screen.getByText('fetched'))
+  })
+
+  test('should remove cache after non-successful restoring', async () => {
+    const key = queryKey()
+
+    const onErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const queryClient = createQueryClient()
+    const removeClient = vi.fn()
+
+    const [error, persister] = createMockErrorPersister(removeClient)
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+      }))
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    render(() => (
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('fetched'))
+    expect(removeClient).toHaveBeenCalledTimes(1)
+    expect(onErrorMock).toHaveBeenCalledTimes(1)
+    expect(onErrorMock).toHaveBeenNthCalledWith(1, error)
+    onErrorMock.mockRestore()
+  })
+
+  test('should be able to persist into multiple clients', async () => {
+    const key = queryKey()
+    const states: Array<{
+      status: string
+      fetchStatus: string
+      data: string | undefined
+    }> = []
+
+    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 queryFn1 = vi.fn().mockImplementation(async () => {
+      await sleep(10)
+      return 'queryFn1'
+    })
+    const queryFn2 = vi.fn().mockImplementation(async () => {
+      await sleep(10)
+      return 'queryFn2'
+    })
+
+    function App() {
+      const [client, setClient] = createSignal(
+        new QueryClient({
+          defaultOptions: {
+            queries: {
+              queryFn: queryFn1,
+            },
+          },
+        }),
+      )
+
+      onMount(() => {
+        setClient(
+          new QueryClient({
+            defaultOptions: {
+              queries: {
+                queryFn: queryFn2,
+              },
+            },
+          }),
+        )
+      })
+
+      return (
+        <PersistQueryClientProvider
+          client={client()}
+          persistOptions={{ persister }}
+          onSuccess={onSuccess}
+        >
+          <Page />
+        </PersistQueryClientProvider>
+      )
+    }
+
+    function Page() {
+      const state = createQuery(() => ({ queryKey: key }))
+
+      createEffect(() =>
+        states.push({
+          status: state.status,
+          fetchStatus: state.fetchStatus,
+          data: state.data as string | undefined,
+        }),
+      )
+
+      return (
+        <div>
+          <h1>{String(state.data)}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    render(() => <App />)
+
+    await waitFor(() => screen.getByText('hydrated'))
+    await waitFor(() => screen.getByText('queryFn2'))
+
+    expect(queryFn1).toHaveBeenCalledTimes(0)
+    expect(queryFn2).toHaveBeenCalledTimes(1)
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+
+    expect(states).toHaveLength(3)
+
+    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: 'idle',
+      data: 'queryFn2',
+    })
+  })
+})

package/src/__tests__/utils.ts

@@ -0,0 +1,18 @@
+import { QueryClient } from '@tanstack/solid-query'
+import type { QueryClientConfig } from '@tanstack/solid-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)
+  })
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+// Re-export core
+export * from '@tanstack/query-persist-client-core'
+
+export * from './PersistQueryClientProvider'