@tanstack/react-query-persist-client 5.0.0-beta.30 → 5.0.0-beta.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/PersistQueryClientProvider.cjs +7 -10
- package/build/legacy/PersistQueryClientProvider.cjs.map +1 -1
- package/build/legacy/PersistQueryClientProvider.js +11 -11
- package/build/legacy/PersistQueryClientProvider.js.map +1 -1
- package/build/modern/PersistQueryClientProvider.cjs +7 -10
- package/build/modern/PersistQueryClientProvider.cjs.map +1 -1
- package/build/modern/PersistQueryClientProvider.js +11 -11
- package/build/modern/PersistQueryClientProvider.js.map +1 -1
- package/package.json +4 -4
- package/src/PersistQueryClientProvider.tsx +11 -13
- package/src/__tests__/PersistQueryClientProvider.test.tsx +65 -1
|
@@ -51,14 +51,14 @@ var PersistQueryClientProvider = ({
|
|
|
51
51
|
refs.current = { persistOptions, onSuccess };
|
|
52
52
|
});
|
|
53
53
|
React.useEffect(() => {
|
|
54
|
+
const options = {
|
|
55
|
+
...refs.current.persistOptions,
|
|
56
|
+
queryClient: client
|
|
57
|
+
};
|
|
54
58
|
if (!didRestore.current) {
|
|
55
59
|
didRestore.current = true;
|
|
56
60
|
setIsRestoring(true);
|
|
57
|
-
|
|
58
|
-
...refs.current.persistOptions,
|
|
59
|
-
queryClient: client
|
|
60
|
-
});
|
|
61
|
-
promise.then(async () => {
|
|
61
|
+
(0, import_query_persist_client_core.persistQueryClientRestore)(options).then(async () => {
|
|
62
62
|
var _a, _b;
|
|
63
63
|
try {
|
|
64
64
|
await ((_b = (_a = refs.current).onSuccess) == null ? void 0 : _b.call(_a));
|
|
@@ -66,12 +66,9 @@ var PersistQueryClientProvider = ({
|
|
|
66
66
|
setIsRestoring(false);
|
|
67
67
|
}
|
|
68
68
|
});
|
|
69
|
-
return () => {
|
|
70
|
-
unsubscribe();
|
|
71
|
-
};
|
|
72
69
|
}
|
|
73
|
-
return void 0;
|
|
74
|
-
}, [client]);
|
|
70
|
+
return isRestoring ? void 0 : (0, import_query_persist_client_core.persistQueryClientSubscribe)(options);
|
|
71
|
+
}, [client, isRestoring]);
|
|
75
72
|
return /* @__PURE__ */ React.createElement(import_react_query.QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(import_react_query.IsRestoringProvider, { value: isRestoring }, children));
|
|
76
73
|
};
|
|
77
74
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {
|
|
1
|
+
{"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":[]}
|
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
// src/PersistQueryClientProvider.tsx
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
persistQueryClientRestore,
|
|
7
|
+
persistQueryClientSubscribe
|
|
8
|
+
} from "@tanstack/query-persist-client-core";
|
|
6
9
|
import { IsRestoringProvider, QueryClientProvider } from "@tanstack/react-query";
|
|
7
10
|
var PersistQueryClientProvider = ({
|
|
8
11
|
client,
|
|
@@ -18,14 +21,14 @@ var PersistQueryClientProvider = ({
|
|
|
18
21
|
refs.current = { persistOptions, onSuccess };
|
|
19
22
|
});
|
|
20
23
|
React.useEffect(() => {
|
|
24
|
+
const options = {
|
|
25
|
+
...refs.current.persistOptions,
|
|
26
|
+
queryClient: client
|
|
27
|
+
};
|
|
21
28
|
if (!didRestore.current) {
|
|
22
29
|
didRestore.current = true;
|
|
23
30
|
setIsRestoring(true);
|
|
24
|
-
|
|
25
|
-
...refs.current.persistOptions,
|
|
26
|
-
queryClient: client
|
|
27
|
-
});
|
|
28
|
-
promise.then(async () => {
|
|
31
|
+
persistQueryClientRestore(options).then(async () => {
|
|
29
32
|
var _a, _b;
|
|
30
33
|
try {
|
|
31
34
|
await ((_b = (_a = refs.current).onSuccess) == null ? void 0 : _b.call(_a));
|
|
@@ -33,12 +36,9 @@ var PersistQueryClientProvider = ({
|
|
|
33
36
|
setIsRestoring(false);
|
|
34
37
|
}
|
|
35
38
|
});
|
|
36
|
-
return () => {
|
|
37
|
-
unsubscribe();
|
|
38
|
-
};
|
|
39
39
|
}
|
|
40
|
-
return void 0;
|
|
41
|
-
}, [client]);
|
|
40
|
+
return isRestoring ? void 0 : persistQueryClientSubscribe(options);
|
|
41
|
+
}, [client, isRestoring]);
|
|
42
42
|
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(IsRestoringProvider, { value: isRestoring }, children));
|
|
43
43
|
};
|
|
44
44
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {
|
|
1
|
+
{"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":[]}
|
|
@@ -51,26 +51,23 @@ var PersistQueryClientProvider = ({
|
|
|
51
51
|
refs.current = { persistOptions, onSuccess };
|
|
52
52
|
});
|
|
53
53
|
React.useEffect(() => {
|
|
54
|
+
const options = {
|
|
55
|
+
...refs.current.persistOptions,
|
|
56
|
+
queryClient: client
|
|
57
|
+
};
|
|
54
58
|
if (!didRestore.current) {
|
|
55
59
|
didRestore.current = true;
|
|
56
60
|
setIsRestoring(true);
|
|
57
|
-
|
|
58
|
-
...refs.current.persistOptions,
|
|
59
|
-
queryClient: client
|
|
60
|
-
});
|
|
61
|
-
promise.then(async () => {
|
|
61
|
+
(0, import_query_persist_client_core.persistQueryClientRestore)(options).then(async () => {
|
|
62
62
|
try {
|
|
63
63
|
await refs.current.onSuccess?.();
|
|
64
64
|
} finally {
|
|
65
65
|
setIsRestoring(false);
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
|
-
return () => {
|
|
69
|
-
unsubscribe();
|
|
70
|
-
};
|
|
71
68
|
}
|
|
72
|
-
return void 0;
|
|
73
|
-
}, [client]);
|
|
69
|
+
return isRestoring ? void 0 : (0, import_query_persist_client_core.persistQueryClientSubscribe)(options);
|
|
70
|
+
}, [client, isRestoring]);
|
|
74
71
|
return /* @__PURE__ */ React.createElement(import_react_query.QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(import_react_query.IsRestoringProvider, { value: isRestoring }, children));
|
|
75
72
|
};
|
|
76
73
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {
|
|
1
|
+
{"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":[]}
|
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
// src/PersistQueryClientProvider.tsx
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
persistQueryClientRestore,
|
|
7
|
+
persistQueryClientSubscribe
|
|
8
|
+
} from "@tanstack/query-persist-client-core";
|
|
6
9
|
import { IsRestoringProvider, QueryClientProvider } from "@tanstack/react-query";
|
|
7
10
|
var PersistQueryClientProvider = ({
|
|
8
11
|
client,
|
|
@@ -18,26 +21,23 @@ var PersistQueryClientProvider = ({
|
|
|
18
21
|
refs.current = { persistOptions, onSuccess };
|
|
19
22
|
});
|
|
20
23
|
React.useEffect(() => {
|
|
24
|
+
const options = {
|
|
25
|
+
...refs.current.persistOptions,
|
|
26
|
+
queryClient: client
|
|
27
|
+
};
|
|
21
28
|
if (!didRestore.current) {
|
|
22
29
|
didRestore.current = true;
|
|
23
30
|
setIsRestoring(true);
|
|
24
|
-
|
|
25
|
-
...refs.current.persistOptions,
|
|
26
|
-
queryClient: client
|
|
27
|
-
});
|
|
28
|
-
promise.then(async () => {
|
|
31
|
+
persistQueryClientRestore(options).then(async () => {
|
|
29
32
|
try {
|
|
30
33
|
await refs.current.onSuccess?.();
|
|
31
34
|
} finally {
|
|
32
35
|
setIsRestoring(false);
|
|
33
36
|
}
|
|
34
37
|
});
|
|
35
|
-
return () => {
|
|
36
|
-
unsubscribe();
|
|
37
|
-
};
|
|
38
38
|
}
|
|
39
|
-
return void 0;
|
|
40
|
-
}, [client]);
|
|
39
|
+
return isRestoring ? void 0 : persistQueryClientSubscribe(options);
|
|
40
|
+
}, [client, isRestoring]);
|
|
41
41
|
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(IsRestoringProvider, { value: isRestoring }, children));
|
|
42
42
|
};
|
|
43
43
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/PersistQueryClientProvider.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport {
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-query-persist-client",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.32",
|
|
4
4
|
"description": "React bindings to work with persisters in TanStack/react-query",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
"src"
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tanstack/query-persist-client-core": "5.0.0-beta.
|
|
40
|
+
"@tanstack/query-persist-client-core": "5.0.0-beta.31"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@types/react": "^18.2.4",
|
|
44
44
|
"@types/react-dom": "^18.2.4",
|
|
45
45
|
"react": "^18.2.0",
|
|
46
46
|
"react-dom": "^18.2.0",
|
|
47
|
-
"@tanstack/react-query": "5.0.0-beta.
|
|
47
|
+
"@tanstack/react-query": "5.0.0-beta.31"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"react": "^18.0.0",
|
|
51
51
|
"react-dom": "^18.0.0",
|
|
52
|
-
"@tanstack/react-query": "^5.0.0-beta.
|
|
52
|
+
"@tanstack/react-query": "^5.0.0-beta.31"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"clean": "rimraf ./build && rimraf ./coverage",
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
import * as React from 'react'
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
persistQueryClientRestore,
|
|
6
|
+
persistQueryClientSubscribe,
|
|
7
|
+
} from '@tanstack/query-persist-client-core'
|
|
5
8
|
import { IsRestoringProvider, QueryClientProvider } from '@tanstack/react-query'
|
|
6
9
|
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
|
|
7
10
|
import type { QueryClientProviderProps } from '@tanstack/react-query'
|
|
@@ -27,28 +30,23 @@ export const PersistQueryClientProvider = ({
|
|
|
27
30
|
})
|
|
28
31
|
|
|
29
32
|
React.useEffect(() => {
|
|
33
|
+
const options = {
|
|
34
|
+
...refs.current.persistOptions,
|
|
35
|
+
queryClient: client,
|
|
36
|
+
}
|
|
30
37
|
if (!didRestore.current) {
|
|
31
38
|
didRestore.current = true
|
|
32
39
|
setIsRestoring(true)
|
|
33
|
-
|
|
34
|
-
...refs.current.persistOptions,
|
|
35
|
-
queryClient: client,
|
|
36
|
-
})
|
|
37
|
-
|
|
38
|
-
promise.then(async () => {
|
|
40
|
+
persistQueryClientRestore(options).then(async () => {
|
|
39
41
|
try {
|
|
40
42
|
await refs.current.onSuccess?.()
|
|
41
43
|
} finally {
|
|
42
44
|
setIsRestoring(false)
|
|
43
45
|
}
|
|
44
46
|
})
|
|
45
|
-
|
|
46
|
-
return () => {
|
|
47
|
-
unsubscribe()
|
|
48
|
-
}
|
|
49
47
|
}
|
|
50
|
-
return undefined
|
|
51
|
-
}, [client])
|
|
48
|
+
return isRestoring ? undefined : persistQueryClientSubscribe(options)
|
|
49
|
+
}, [client, isRestoring])
|
|
52
50
|
|
|
53
51
|
return (
|
|
54
52
|
<QueryClientProvider client={client} {...props}>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
|
-
import { render, waitFor } from '@testing-library/react'
|
|
2
|
+
import { fireEvent, render, waitFor } from '@testing-library/react'
|
|
3
3
|
import { vi } from 'vitest'
|
|
4
4
|
|
|
5
5
|
import { QueryClient, useQueries, useQuery } from '@tanstack/react-query'
|
|
@@ -128,6 +128,70 @@ describe('PersistQueryClientProvider', () => {
|
|
|
128
128
|
})
|
|
129
129
|
})
|
|
130
130
|
|
|
131
|
+
test('should subscribe correctly in StrictMode', async () => {
|
|
132
|
+
const key = queryKey()
|
|
133
|
+
|
|
134
|
+
const queryClient = createQueryClient()
|
|
135
|
+
await queryClient.prefetchQuery({
|
|
136
|
+
queryKey: key,
|
|
137
|
+
queryFn: () => Promise.resolve('hydrated'),
|
|
138
|
+
})
|
|
139
|
+
|
|
140
|
+
const persister = createMockPersister()
|
|
141
|
+
|
|
142
|
+
await persistQueryClientSave({ queryClient, persister })
|
|
143
|
+
|
|
144
|
+
queryClient.clear()
|
|
145
|
+
|
|
146
|
+
function Page() {
|
|
147
|
+
const state = useQuery({
|
|
148
|
+
queryKey: key,
|
|
149
|
+
queryFn: async () => {
|
|
150
|
+
await sleep(10)
|
|
151
|
+
return 'fetched'
|
|
152
|
+
},
|
|
153
|
+
})
|
|
154
|
+
|
|
155
|
+
return (
|
|
156
|
+
<div>
|
|
157
|
+
<h1>{state.data}</h1>
|
|
158
|
+
<h2>fetchStatus: {state.fetchStatus}</h2>
|
|
159
|
+
<button
|
|
160
|
+
onClick={() => {
|
|
161
|
+
queryClient.setQueryData(key, 'updated')
|
|
162
|
+
}}
|
|
163
|
+
>
|
|
164
|
+
update
|
|
165
|
+
</button>
|
|
166
|
+
</div>
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
const rendered = render(
|
|
171
|
+
<React.StrictMode>
|
|
172
|
+
<PersistQueryClientProvider
|
|
173
|
+
client={queryClient}
|
|
174
|
+
persistOptions={{ persister }}
|
|
175
|
+
>
|
|
176
|
+
<Page />
|
|
177
|
+
</PersistQueryClientProvider>
|
|
178
|
+
,
|
|
179
|
+
</React.StrictMode>,
|
|
180
|
+
)
|
|
181
|
+
|
|
182
|
+
await waitFor(() => rendered.getByText('fetchStatus: idle'))
|
|
183
|
+
await waitFor(() => rendered.getByText('hydrated'))
|
|
184
|
+
await waitFor(() => rendered.getByText('fetched'))
|
|
185
|
+
|
|
186
|
+
fireEvent.click(rendered.getByRole('button', { name: /update/i }))
|
|
187
|
+
|
|
188
|
+
await waitFor(() => rendered.getByText('updated'))
|
|
189
|
+
|
|
190
|
+
const state = await persister.restoreClient()
|
|
191
|
+
|
|
192
|
+
expect(state?.clientState.queries[0]?.state.data).toBe('updated')
|
|
193
|
+
})
|
|
194
|
+
|
|
131
195
|
test('should also put useQueries into idle state', async () => {
|
|
132
196
|
const key = queryKey()
|
|
133
197
|
const states: Array<UseQueryResult> = []
|