@tanstack/react-query-persist-client 5.0.0-beta.9 → 5.0.0-rc.1

package/build/legacy/PersistQueryClientProvider.cjs

@@ -46,31 +46,29 @@ var PersistQueryClientProvider = ({
 }) => {
   const [isRestoring, setIsRestoring] = React.useState(true);
   const refs = React.useRef({ persistOptions, onSuccess });
+  const didRestore = React.useRef(false);
   React.useEffect(() => {
     refs.current = { persistOptions, onSuccess };
   });
   React.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = (0, import_query_persist_client_core.persistQueryClient)({
+    const options = {
       ...refs.current.persistOptions,
       queryClient: client
-    });
-    promise.then(async () => {
-      var _a, _b;
-      if (!isStale) {
+    };
+    if (!didRestore.current) {
+      didRestore.current = true;
+      setIsRestoring(true);
+      (0, import_query_persist_client_core.persistQueryClientRestore)(options).then(async () => {
+        var _a, _b;
         try {
           await ((_b = (_a = refs.current).onSuccess) == null ? void 0 : _b.call(_a));
         } finally {
           setIsRestoring(false);
         }
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
+      });
+    }
+    return isRestoring ? void 0 : (0, import_query_persist_client_core.persistQueryClientSubscribe)(options);
+  }, [client, isRestoring]);
   return /* @__PURE__ */ React.createElement(import_react_query.QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(import_react_query.IsRestoringProvider, { value: isRestoring }, children));
 };
 // Annotate the CommonJS export names for ESM import in node:

package/build/legacy/PersistQueryClientProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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(async () => {\n      if (!isStale) {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,uCAAmC;AACnC,yBAAyD;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AAEvD,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACd,mBAAe,IAAI;AACnB,UAAM,CAAC,aAAa,OAAO,QAAI,qDAAmB;AAAA,MAChD,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf,CAAC;AAED,YAAQ,KAAK,YAAY;AAnC7B;AAoCM,UAAI,CAAC,SAAS;AACZ,YAAI;AACF,kBAAM,gBAAK,SAAQ,cAAb;AAAA,QACR,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AACV,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,0CAAoB,QAAiB,GAAG,SACvC,oCAAC,0CAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {\n  persistQueryClientRestore,\n  persistQueryClientSubscribe,\n} from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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  const didRestore = React.useRef(false)\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    const options = {\n      ...refs.current.persistOptions,\n      queryClient: client,\n    }\n    if (!didRestore.current) {\n      didRestore.current = true\n      setIsRestoring(true)\n      persistQueryClientRestore(options).then(async () => {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\n      })\n    }\n    return isRestoring ? undefined : persistQueryClientSubscribe(options)\n  }, [client, isRestoring])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,uCAGO;AACP,yBAAyD;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,UAAM,UAAU;AAAA,MACd,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf;AACA,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,sEAA0B,OAAO,EAAE,KAAK,YAAY;AAvC1D;AAwCQ,YAAI;AACF,kBAAM,gBAAK,SAAQ,cAAb;AAAA,QACR,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,cAAc,aAAY,8DAA4B,OAAO;AAAA,EACtE,GAAG,CAAC,QAAQ,WAAW,CAAC;AAExB,SACE,oCAAC,0CAAoB,QAAiB,GAAG,SACvC,oCAAC,0CAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}

package/build/legacy/PersistQueryClientProvider.js

@@ -2,7 +2,10 @@
 
 // src/PersistQueryClientProvider.tsx
 import * as React from "react";
-import { persistQueryClient } from "@tanstack/query-persist-client-core";
+import {
+  persistQueryClientRestore,
+  persistQueryClientSubscribe
+} from "@tanstack/query-persist-client-core";
 import { IsRestoringProvider, QueryClientProvider } from "@tanstack/react-query";
 var PersistQueryClientProvider = ({
   client,
@@ -13,31 +16,29 @@ var PersistQueryClientProvider = ({
 }) => {
   const [isRestoring, setIsRestoring] = React.useState(true);
   const refs = React.useRef({ persistOptions, onSuccess });
+  const didRestore = React.useRef(false);
   React.useEffect(() => {
     refs.current = { persistOptions, onSuccess };
   });
   React.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = persistQueryClient({
+    const options = {
       ...refs.current.persistOptions,
       queryClient: client
-    });
-    promise.then(async () => {
-      var _a, _b;
-      if (!isStale) {
+    };
+    if (!didRestore.current) {
+      didRestore.current = true;
+      setIsRestoring(true);
+      persistQueryClientRestore(options).then(async () => {
+        var _a, _b;
         try {
           await ((_b = (_a = refs.current).onSuccess) == null ? void 0 : _b.call(_a));
         } finally {
           setIsRestoring(false);
         }
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
+      });
+    }
+    return isRestoring ? void 0 : persistQueryClientSubscribe(options);
+  }, [client, isRestoring]);
   return /* @__PURE__ */ React.createElement(QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(IsRestoringProvider, { value: isRestoring }, children));
 };
 export {

package/build/legacy/PersistQueryClientProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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(async () => {\n      if (!isStale) {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\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"],"mappings":";;;AACA,YAAY,WAAW;AAEvB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB,2BAA2B;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AAEvD,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACd,mBAAe,IAAI;AACnB,UAAM,CAAC,aAAa,OAAO,IAAI,mBAAmB;AAAA,MAChD,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf,CAAC;AAED,YAAQ,KAAK,YAAY;AAnC7B;AAoCM,UAAI,CAAC,SAAS;AACZ,YAAI;AACF,kBAAM,gBAAK,SAAQ,cAAb;AAAA,QACR,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AACV,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,uBAAoB,QAAiB,GAAG,SACvC,oCAAC,uBAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {\n  persistQueryClientRestore,\n  persistQueryClientSubscribe,\n} from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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  const didRestore = React.useRef(false)\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    const options = {\n      ...refs.current.persistOptions,\n      queryClient: client,\n    }\n    if (!didRestore.current) {\n      didRestore.current = true\n      setIsRestoring(true)\n      persistQueryClientRestore(options).then(async () => {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\n      })\n    }\n    return isRestoring ? undefined : persistQueryClientSubscribe(options)\n  }, [client, isRestoring])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,2BAA2B;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,UAAM,UAAU;AAAA,MACd,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf;AACA,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,gCAA0B,OAAO,EAAE,KAAK,YAAY;AAvC1D;AAwCQ,YAAI;AACF,kBAAM,gBAAK,SAAQ,cAAb;AAAA,QACR,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,cAAc,SAAY,4BAA4B,OAAO;AAAA,EACtE,GAAG,CAAC,QAAQ,WAAW,CAAC;AAExB,SACE,oCAAC,uBAAoB,QAAiB,GAAG,SACvC,oCAAC,uBAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}

package/build/modern/PersistQueryClientProvider.cjs

@@ -46,30 +46,28 @@ var PersistQueryClientProvider = ({
 }) => {
   const [isRestoring, setIsRestoring] = React.useState(true);
   const refs = React.useRef({ persistOptions, onSuccess });
+  const didRestore = React.useRef(false);
   React.useEffect(() => {
     refs.current = { persistOptions, onSuccess };
   });
   React.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = (0, import_query_persist_client_core.persistQueryClient)({
+    const options = {
       ...refs.current.persistOptions,
       queryClient: client
-    });
-    promise.then(async () => {
-      if (!isStale) {
+    };
+    if (!didRestore.current) {
+      didRestore.current = true;
+      setIsRestoring(true);
+      (0, import_query_persist_client_core.persistQueryClientRestore)(options).then(async () => {
         try {
           await refs.current.onSuccess?.();
         } finally {
           setIsRestoring(false);
         }
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
+      });
+    }
+    return isRestoring ? void 0 : (0, import_query_persist_client_core.persistQueryClientSubscribe)(options);
+  }, [client, isRestoring]);
   return /* @__PURE__ */ React.createElement(import_react_query.QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(import_react_query.IsRestoringProvider, { value: isRestoring }, children));
 };
 // Annotate the CommonJS export names for ESM import in node:

package/build/modern/PersistQueryClientProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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(async () => {\n      if (!isStale) {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,uCAAmC;AACnC,yBAAyD;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AAEvD,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACd,mBAAe,IAAI;AACnB,UAAM,CAAC,aAAa,OAAO,QAAI,qDAAmB;AAAA,MAChD,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf,CAAC;AAED,YAAQ,KAAK,YAAY;AACvB,UAAI,CAAC,SAAS;AACZ,YAAI;AACF,gBAAM,KAAK,QAAQ,YAAY;AAAA,QACjC,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AACV,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,0CAAoB,QAAiB,GAAG,SACvC,oCAAC,0CAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {\n  persistQueryClientRestore,\n  persistQueryClientSubscribe,\n} from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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  const didRestore = React.useRef(false)\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    const options = {\n      ...refs.current.persistOptions,\n      queryClient: client,\n    }\n    if (!didRestore.current) {\n      didRestore.current = true\n      setIsRestoring(true)\n      persistQueryClientRestore(options).then(async () => {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\n      })\n    }\n    return isRestoring ? undefined : persistQueryClientSubscribe(options)\n  }, [client, isRestoring])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,uCAGO;AACP,yBAAyD;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,UAAM,UAAU;AAAA,MACd,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf;AACA,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,sEAA0B,OAAO,EAAE,KAAK,YAAY;AAClD,YAAI;AACF,gBAAM,KAAK,QAAQ,YAAY;AAAA,QACjC,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,cAAc,aAAY,8DAA4B,OAAO;AAAA,EACtE,GAAG,CAAC,QAAQ,WAAW,CAAC;AAExB,SACE,oCAAC,0CAAoB,QAAiB,GAAG,SACvC,oCAAC,0CAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}

package/build/modern/PersistQueryClientProvider.js

@@ -2,7 +2,10 @@
 
 // src/PersistQueryClientProvider.tsx
 import * as React from "react";
-import { persistQueryClient } from "@tanstack/query-persist-client-core";
+import {
+  persistQueryClientRestore,
+  persistQueryClientSubscribe
+} from "@tanstack/query-persist-client-core";
 import { IsRestoringProvider, QueryClientProvider } from "@tanstack/react-query";
 var PersistQueryClientProvider = ({
   client,
@@ -13,30 +16,28 @@ var PersistQueryClientProvider = ({
 }) => {
   const [isRestoring, setIsRestoring] = React.useState(true);
   const refs = React.useRef({ persistOptions, onSuccess });
+  const didRestore = React.useRef(false);
   React.useEffect(() => {
     refs.current = { persistOptions, onSuccess };
   });
   React.useEffect(() => {
-    let isStale = false;
-    setIsRestoring(true);
-    const [unsubscribe, promise] = persistQueryClient({
+    const options = {
       ...refs.current.persistOptions,
       queryClient: client
-    });
-    promise.then(async () => {
-      if (!isStale) {
+    };
+    if (!didRestore.current) {
+      didRestore.current = true;
+      setIsRestoring(true);
+      persistQueryClientRestore(options).then(async () => {
         try {
           await refs.current.onSuccess?.();
         } finally {
           setIsRestoring(false);
         }
-      }
-    });
-    return () => {
-      isStale = true;
-      unsubscribe();
-    };
-  }, [client]);
+      });
+    }
+    return isRestoring ? void 0 : persistQueryClientSubscribe(options);
+  }, [client, isRestoring]);
   return /* @__PURE__ */ React.createElement(QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(IsRestoringProvider, { value: isRestoring }, children));
 };
 export {

package/build/modern/PersistQueryClientProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { persistQueryClient } from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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(async () => {\n      if (!isStale) {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\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"],"mappings":";;;AACA,YAAY,WAAW;AAEvB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB,2BAA2B;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AAEvD,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACd,mBAAe,IAAI;AACnB,UAAM,CAAC,aAAa,OAAO,IAAI,mBAAmB;AAAA,MAChD,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf,CAAC;AAED,YAAQ,KAAK,YAAY;AACvB,UAAI,CAAC,SAAS;AACZ,YAAI;AACF,gBAAM,KAAK,QAAQ,YAAY;AAAA,QACjC,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AACV,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,uBAAoB,QAAiB,GAAG,SACvC,oCAAC,uBAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {\n  persistQueryClientRestore,\n  persistQueryClientSubscribe,\n} from '@tanstack/query-persist-client-core'\nimport { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'\nimport type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'\nimport type { QueryClientProviderProps } from '@tanstack/react-query'\n\nexport type PersistQueryClientProviderProps = QueryClientProviderProps & {\n  persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>\n  onSuccess?: () => Promise<unknown> | unknown\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  const didRestore = React.useRef(false)\n\n  React.useEffect(() => {\n    refs.current = { persistOptions, onSuccess }\n  })\n\n  React.useEffect(() => {\n    const options = {\n      ...refs.current.persistOptions,\n      queryClient: client,\n    }\n    if (!didRestore.current) {\n      didRestore.current = true\n      setIsRestoring(true)\n      persistQueryClientRestore(options).then(async () => {\n        try {\n          await refs.current.onSuccess?.()\n        } finally {\n          setIsRestoring(false)\n        }\n      })\n    }\n    return isRestoring ? undefined : persistQueryClientSubscribe(options)\n  }, [client, isRestoring])\n\n  return (\n    <QueryClientProvider client={client} {...props}>\n      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>\n    </QueryClientProvider>\n  )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,2BAA2B;AASlD,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoD;AAClD,QAAM,CAAC,aAAa,cAAc,IAAU,eAAS,IAAI;AACzD,QAAM,OAAa,aAAO,EAAE,gBAAgB,UAAU,CAAC;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,UAAM,UAAU;AAAA,MACd,GAAG,KAAK,QAAQ;AAAA,MAChB,aAAa;AAAA,IACf;AACA,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,gCAA0B,OAAO,EAAE,KAAK,YAAY;AAClD,YAAI;AACF,gBAAM,KAAK,QAAQ,YAAY;AAAA,QACjC,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,cAAc,SAAY,4BAA4B,OAAO;AAAA,EACtE,GAAG,CAAC,QAAQ,WAAW,CAAC;AAExB,SACE,oCAAC,uBAAoB,QAAiB,GAAG,SACvC,oCAAC,uBAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@tanstack/react-query-persist-client",
-  "version": "5.0.0-beta.9",
+  "version": "5.0.0-rc.1",
   "description": "React bindings to work with persisters in TanStack/react-query",
   "author": "tannerlinsley",
   "license": "MIT",
-  "repository": "tanstack/query",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/query.git",
+    "directory": "packages/react-query-persist-client"
+  },
   "homepage": "https://tanstack.com/query",
   "funding": {
     "type": "github",
@@ -33,19 +37,19 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/query-persist-client-core": "5.0.0-beta.9"
+    "@tanstack/query-persist-client-core": "5.0.0-rc.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.4",
     "@types/react-dom": "^18.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "5.0.0-beta.9"
+    "@tanstack/react-query": "5.0.0-rc.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "5.0.0-beta.9"
+    "@tanstack/react-query": "^5.0.0-rc.1"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/PersistQueryClientProvider.tsx

@@ -1,7 +1,10 @@
 'use client'
 import * as React from 'react'
 
-import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import {
+  persistQueryClientRestore,
+  persistQueryClientSubscribe,
+} from '@tanstack/query-persist-client-core'
 import { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'
 import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
 import type { QueryClientProviderProps } from '@tanstack/react-query'
@@ -20,34 +23,30 @@ export const PersistQueryClientProvider = ({
 }: PersistQueryClientProviderProps): JSX.Element => {
   const [isRestoring, setIsRestoring] = React.useState(true)
   const refs = React.useRef({ persistOptions, onSuccess })
+  const didRestore = React.useRef(false)
 
   React.useEffect(() => {
     refs.current = { persistOptions, onSuccess }
   })
 
   React.useEffect(() => {
-    let isStale = false
-    setIsRestoring(true)
-    const [unsubscribe, promise] = persistQueryClient({
+    const options = {
       ...refs.current.persistOptions,
       queryClient: client,
-    })
-
-    promise.then(async () => {
-      if (!isStale) {
+    }
+    if (!didRestore.current) {
+      didRestore.current = true
+      setIsRestoring(true)
+      persistQueryClientRestore(options).then(async () => {
         try {
           await refs.current.onSuccess?.()
         } finally {
           setIsRestoring(false)
         }
-      }
-    })
-
-    return () => {
-      isStale = true
-      unsubscribe()
+      })
     }
-  }, [client])
+    return isRestoring ? undefined : persistQueryClientSubscribe(options)
+  }, [client, isRestoring])
 
   return (
     <QueryClientProvider client={client} {...props}>

package/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 
 import { QueryClient, useQueries, useQuery } from '@tanstack/react-query'
@@ -55,7 +55,7 @@ const createMockErrorPersister = (
 describe('PersistQueryClientProvider', () => {
   test('restores cache from persister', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -128,9 +128,73 @@ describe('PersistQueryClientProvider', () => {
     })
   })
 
+  test('should subscribe correctly in StrictMode', 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 = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+      })
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+          <button
+            onClick={() => {
+              queryClient.setQueryData(key, 'updated')
+            }}
+          >
+            update
+          </button>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <React.StrictMode>
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister }}
+        >
+          <Page />
+        </PersistQueryClientProvider>
+        ,
+      </React.StrictMode>,
+    )
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    fireEvent.click(rendered.getByRole('button', { name: /update/i }))
+
+    await waitFor(() => rendered.getByText('updated'))
+
+    const state = await persister.restoreClient()
+
+    expect(state?.clientState.queries[0]?.state.data).toBe('updated')
+  })
+
   test('should also put useQueries into idle state', async () => {
     const key = queryKey()
-    const states: UseQueryResult[] = []
+    const states: Array<UseQueryResult> = []
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -209,7 +273,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should show initialData while restoring', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<string>[] = []
+    const states: Array<DefinedUseQueryResult<string>> = []
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -289,7 +353,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should not refetch after restoring when data is fresh', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -515,7 +579,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should be able to persist into multiple clients', async () => {
     const key = queryKey()
-    const states: UseQueryResult[] = []
+    const states: Array<UseQueryResult> = []
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -629,4 +693,77 @@ describe('PersistQueryClientProvider', () => {
       data: 'queryFn2',
     })
   })
+
+  test('should only restore once in StrictMode', async () => {
+    let restoreCount = 0
+    const createPersister = (): Persister => {
+      let storedState: PersistedClient | undefined
+
+      return {
+        async persistClient(persistClient) {
+          storedState = persistClient
+        },
+        async restoreClient() {
+          restoreCount++
+          await sleep(10)
+          return storedState
+        },
+        removeClient() {
+          storedState = undefined
+        },
+      }
+    }
+
+    const key = queryKey()
+
+    const queryClient = createQueryClient()
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => Promise.resolve('hydrated'),
+    })
+
+    const persister = createPersister()
+
+    const onSuccess = vi.fn()
+
+    await persistQueryClientSave({ queryClient, persister })
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'fetched'
+        },
+      })
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <React.StrictMode>
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister }}
+          onSuccess={onSuccess}
+        >
+          <Page />
+        </PersistQueryClientProvider>
+      </React.StrictMode>,
+    )
+
+    await waitFor(() => rendered.getByText('fetchStatus: idle'))
+    await waitFor(() => rendered.getByText('hydrated'))
+    await waitFor(() => rendered.getByText('fetched'))
+
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    expect(restoreCount).toBe(1)
+  })
 })