@tanstack/react-query-persist-client 5.0.0-alpha.9 → 5.0.0-alpha.91

package/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -2,19 +2,19 @@ import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 
-import type {
-  UseQueryResult,
-  DefinedUseQueryResult,
-} from '@tanstack/react-query'
-import { QueryClient, useQuery, useQueries } from '@tanstack/react-query'
+import { QueryClient, useQueries, useQuery } from '@tanstack/react-query'
+import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
+
+import { PersistQueryClientProvider } from '../PersistQueryClientProvider'
+import { createQueryClient, queryKey, sleep } from './utils'
 import type {
   PersistedClient,
   Persister,
 } from '@tanstack/query-persist-client-core'
-import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
-
-import { createQueryClient, queryKey, sleep } from './utils'
-import { PersistQueryClientProvider } from '../PersistQueryClientProvider'
+import type {
+  DefinedUseQueryResult,
+  UseQueryResult,
+} from '@tanstack/react-query'
 
 const createMockPersister = (): Persister => {
   let storedState: PersistedClient | undefined
@@ -303,10 +303,13 @@ describe('PersistQueryClientProvider', () => {
 
     queryClient.clear()
 
+    let fetched = false
+
     function Page() {
       const state = useQuery({
         queryKey: key,
         queryFn: async () => {
+          fetched = true
           await sleep(10)
           return 'fetched'
         },
@@ -338,6 +341,8 @@ describe('PersistQueryClientProvider', () => {
 
     expect(states).toHaveLength(2)
 
+    expect(fetched).toBe(false)
+
     expect(states[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
@@ -401,6 +406,66 @@ describe('PersistQueryClientProvider', () => {
     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: Array<string> = []
+
+    function Page() {
+      const { data, fetchStatus } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          states.push('fetching')
+          await sleep(10)
+          states.push('fetched')
+          return 'fetched'
+        },
+      })
+
+      return (
+        <div>
+          <h1>{data}</h1>
+          <h2>fetchStatus: {fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+        onSuccess={async () => {
+          states.push('onSuccess')
+          await sleep(20)
+          states.push('onSuccess done')
+        }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+    expect(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')

package/src/__tests__/utils.ts

@@ -1,7 +1,7 @@
 import { act } from '@testing-library/react'
 
-import type { QueryClientConfig } from '@tanstack/query-core'
-import { QueryClient } from '@tanstack/query-core'
+import { QueryClient } from '@tanstack/react-query'
+import type { QueryClientConfig } from '@tanstack/react-query'
 
 export function createQueryClient(config?: QueryClientConfig): QueryClient {
   return new QueryClient(config)

package/build/lib/PersistQueryClientProvider.d.ts

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

package/build/lib/PersistQueryClientProvider.esm.js

@@ -1,51 +0,0 @@
-'use client';
-import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
-import * as React from 'react';
-import { persistQueryClient } from '@tanstack/query-persist-client-core';
-import { QueryClientProvider, IsRestoringProvider } from '@tanstack/react-query';
-
-const PersistQueryClientProvider = ({
-  client,
-  children,
-  persistOptions,
-  onSuccess,
-  ...props
-}) => {
-  const [isRestoring, setIsRestoring] = React.useState(true);
-  const refs = React.useRef({
-    persistOptions,
-    onSuccess
-  });
-  React.useEffect(() => {
-    refs.current = {
-      persistOptions,
-      onSuccess
-    };
-  });
-  React.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = persistQueryClient({
-      ...refs.current.persistOptions,
-      queryClient: client
-    });
-    promise.then(() => {
-      if (!isStale) {
-        refs.current.onSuccess == null ? void 0 : refs.current.onSuccess();
-        setIsRestoring(false);
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
-  return /*#__PURE__*/React.createElement(QueryClientProvider, _extends({
-    client: client
-  }, props), /*#__PURE__*/React.createElement(IsRestoringProvider, {
-    value: isRestoring
-  }, children));
-};
-
-export { PersistQueryClientProvider };
-//# sourceMappingURL=PersistQueryClientProvider.esm.js.map

package/build/lib/PersistQueryClientProvider.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PersistQueryClientProvider.esm.js","sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\nimport { QueryClientProvider, IsRestoringProvider } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => void\n}\n\nexport const PersistQueryClientProvider = ({\n  client,\n  children,\n  persistOptions,\n  onSuccess,\n  ...props\n}: PersistQueryClientProviderProps): JSX.Element => {\n  const [isRestoring, setIsRestoring] = React.useState(true)\n  const refs = React.useRef({ persistOptions, onSuccess })\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    let isStale = false\n    setIsRestoring(true)\n    const [unsubscribe, promise] = persistQueryClient({\n      ...refs.current.persistOptions,\n      queryClient: client,\n    })\n\n    promise.then(() => {\n      if (!isStale) {\n        refs.current.onSuccess?.()\n        setIsRestoring(false)\n      }\n    })\n\n    return () => {\n      isStale = true\n      unsubscribe()\n    }\n  }, [client])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"names":["onSuccess","queryClient","isStale","unsubscribe"],"mappings":";;;;;;AAaO;;;;;;AAM0B;;AAE/B;;AAA4CA;AAAU;;;;AAGnBA;;AACnC;;;;AAKE;AACE;AACAC;AACF;;;;;AAME;AACF;AAEA;AACEC;AACAC;;AAEJ;AAEA;AACuB;;AACE;;AAG3B;;"}

package/build/lib/PersistQueryClientProvider.js

@@ -1,72 +0,0 @@
-'use client';
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var queryPersistClientCore = require('@tanstack/query-persist-client-core');
-var reactQuery = require('@tanstack/react-query');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const PersistQueryClientProvider = ({
-  client,
-  children,
-  persistOptions,
-  onSuccess,
-  ...props
-}) => {
-  const [isRestoring, setIsRestoring] = React__namespace.useState(true);
-  const refs = React__namespace.useRef({
-    persistOptions,
-    onSuccess
-  });
-  React__namespace.useEffect(() => {
-    refs.current = {
-      persistOptions,
-      onSuccess
-    };
-  });
-  React__namespace.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = queryPersistClientCore.persistQueryClient({
-      ...refs.current.persistOptions,
-      queryClient: client
-    });
-    promise.then(() => {
-      if (!isStale) {
-        refs.current.onSuccess == null ? void 0 : refs.current.onSuccess();
-        setIsRestoring(false);
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
-  return /*#__PURE__*/React__namespace.createElement(reactQuery.QueryClientProvider, _rollupPluginBabelHelpers.extends({
-    client: client
-  }, props), /*#__PURE__*/React__namespace.createElement(reactQuery.IsRestoringProvider, {
-    value: isRestoring
-  }, children));
-};
-
-exports.PersistQueryClientProvider = PersistQueryClientProvider;
-//# sourceMappingURL=PersistQueryClientProvider.js.map

package/build/lib/PersistQueryClientProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PersistQueryClientProvider.js","sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\nimport { QueryClientProvider, IsRestoringProvider } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => void\n}\n\nexport const PersistQueryClientProvider = ({\n  client,\n  children,\n  persistOptions,\n  onSuccess,\n  ...props\n}: PersistQueryClientProviderProps): JSX.Element => {\n  const [isRestoring, setIsRestoring] = React.useState(true)\n  const refs = React.useRef({ persistOptions, onSuccess })\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    let isStale = false\n    setIsRestoring(true)\n    const [unsubscribe, promise] = persistQueryClient({\n      ...refs.current.persistOptions,\n      queryClient: client,\n    })\n\n    promise.then(() => {\n      if (!isStale) {\n        refs.current.onSuccess?.()\n        setIsRestoring(false)\n      }\n    })\n\n    return () => {\n      isStale = true\n      unsubscribe()\n    }\n  }, [client])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"names":["onSuccess","queryClient","isStale","unsubscribe"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO;;;;;;AAM0B;;AAE/B;;AAA4CA;AAAU;;;;AAGnBA;;AACnC;;;;AAKE;AACE;AACAC;AACF;;;;;AAME;AACF;AAEA;AACEC;AACAC;;AAEJ;AAEA;AACuB;;AACE;;AAG3B;;"}

package/build/lib/PersistQueryClientProvider.mjs

@@ -1,51 +0,0 @@
-'use client';
-import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import * as React from 'react';
-import { persistQueryClient } from '@tanstack/query-persist-client-core';
-import { QueryClientProvider, IsRestoringProvider } from '@tanstack/react-query';
-
-const PersistQueryClientProvider = ({
-  client,
-  children,
-  persistOptions,
-  onSuccess,
-  ...props
-}) => {
-  const [isRestoring, setIsRestoring] = React.useState(true);
-  const refs = React.useRef({
-    persistOptions,
-    onSuccess
-  });
-  React.useEffect(() => {
-    refs.current = {
-      persistOptions,
-      onSuccess
-    };
-  });
-  React.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = persistQueryClient({
-      ...refs.current.persistOptions,
-      queryClient: client
-    });
-    promise.then(() => {
-      if (!isStale) {
-        refs.current.onSuccess?.();
-        setIsRestoring(false);
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
-  return /*#__PURE__*/React.createElement(QueryClientProvider, _extends({
-    client: client
-  }, props), /*#__PURE__*/React.createElement(IsRestoringProvider, {
-    value: isRestoring
-  }, children));
-};
-
-export { PersistQueryClientProvider };
-//# sourceMappingURL=PersistQueryClientProvider.mjs.map

package/build/lib/PersistQueryClientProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PersistQueryClientProvider.mjs","sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\nimport { QueryClientProvider, IsRestoringProvider } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => void\n}\n\nexport const PersistQueryClientProvider = ({\n  client,\n  children,\n  persistOptions,\n  onSuccess,\n  ...props\n}: PersistQueryClientProviderProps): JSX.Element => {\n  const [isRestoring, setIsRestoring] = React.useState(true)\n  const refs = React.useRef({ persistOptions, onSuccess })\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    let isStale = false\n    setIsRestoring(true)\n    const [unsubscribe, promise] = persistQueryClient({\n      ...refs.current.persistOptions,\n      queryClient: client,\n    })\n\n    promise.then(() => {\n      if (!isStale) {\n        refs.current.onSuccess?.()\n        setIsRestoring(false)\n      }\n    })\n\n    return () => {\n      isStale = true\n      unsubscribe()\n    }\n  }, [client])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"names":["onSuccess","queryClient","refs","isStale","unsubscribe"],"mappings":";;;;;;AAaO;;;;;;AAM0B;;AAE/B;;AAA4CA;AAAU;;;;AAGnBA;;AACnC;;;;AAKE;AACE;AACAC;AACF;;;AAIIC;;AAEF;AACF;AAEA;AACEC;AACAC;;AAEJ;AAEA;AACuB;;AACE;;AAG3B;;"}

package/build/lib/__tests__/PersistQueryClientProvider.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/lib/__tests__/utils.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="node" />
-import type { QueryClientConfig } from '@tanstack/query-core';
-import { QueryClient } from '@tanstack/query-core';
-export declare function createQueryClient(config?: QueryClientConfig): QueryClient;
-export declare function queryKey(): Array<string>;
-export declare function sleep(timeout: number): Promise<void>;
-export declare function setActTimeout(fn: () => void, ms?: number): NodeJS.Timeout;

package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js

@@ -1,17 +0,0 @@
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-export { _extends as extends };
-//# sourceMappingURL=_rollupPluginBabelHelpers.esm.js.map

package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -1,19 +0,0 @@
-'use strict';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-exports.extends = _extends;
-//# sourceMappingURL=_rollupPluginBabelHelpers.js.map

package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs

@@ -1,17 +0,0 @@
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-export { _extends as extends };
-//# sourceMappingURL=_rollupPluginBabelHelpers.mjs.map

package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/lib/index.d.ts

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

package/build/lib/index.esm.js

@@ -1,3 +0,0 @@
-export * from '@tanstack/query-persist-client-core';
-export { PersistQueryClientProvider } from './PersistQueryClientProvider.esm.js';
-//# sourceMappingURL=index.esm.js.map

package/build/lib/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/build/lib/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var queryPersistClientCore = require('@tanstack/query-persist-client-core');
-var PersistQueryClientProvider = require('./PersistQueryClientProvider.js');
-
-
-
-exports.PersistQueryClientProvider = PersistQueryClientProvider.PersistQueryClientProvider;
-Object.keys(queryPersistClientCore).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return queryPersistClientCore[k]; }
-	});
-});
-//# sourceMappingURL=index.js.map

package/build/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/build/lib/index.mjs

@@ -1,3 +0,0 @@
-export * from '@tanstack/query-persist-client-core';
-export { PersistQueryClientProvider } from './PersistQueryClientProvider.mjs';
-//# sourceMappingURL=index.mjs.map

package/build/lib/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}