@tanstack/react-query-persist-client 5.0.0-beta.29 → 5.0.0-beta.30
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 +16 -15
- package/build/legacy/PersistQueryClientProvider.cjs.map +1 -1
- package/build/legacy/PersistQueryClientProvider.js +16 -15
- package/build/legacy/PersistQueryClientProvider.js.map +1 -1
- package/build/modern/PersistQueryClientProvider.cjs +15 -14
- package/build/modern/PersistQueryClientProvider.cjs.map +1 -1
- package/build/modern/PersistQueryClientProvider.js +15 -14
- package/build/modern/PersistQueryClientProvider.js.map +1 -1
- package/package.json +1 -1
- package/src/PersistQueryClientProvider.tsx +15 -14
- package/src/__tests__/PersistQueryClientProvider.test.tsx +73 -0
|
@@ -46,30 +46,31 @@ var PersistQueryClientProvider = ({
|
|
|
46
46
|
}) => {
|
|
47
47
|
const [isRestoring, setIsRestoring] = React.useState(true);
|
|
48
48
|
const refs = React.useRef({ persistOptions, onSuccess });
|
|
49
|
+
const didRestore = React.useRef(false);
|
|
49
50
|
React.useEffect(() => {
|
|
50
51
|
refs.current = { persistOptions, onSuccess };
|
|
51
52
|
});
|
|
52
53
|
React.useEffect(() => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
if (!didRestore.current) {
|
|
55
|
+
didRestore.current = true;
|
|
56
|
+
setIsRestoring(true);
|
|
57
|
+
const [unsubscribe, promise] = (0, import_query_persist_client_core.persistQueryClient)({
|
|
58
|
+
...refs.current.persistOptions,
|
|
59
|
+
queryClient: client
|
|
60
|
+
});
|
|
61
|
+
promise.then(async () => {
|
|
62
|
+
var _a, _b;
|
|
62
63
|
try {
|
|
63
64
|
await ((_b = (_a = refs.current).onSuccess) == null ? void 0 : _b.call(_a));
|
|
64
65
|
} finally {
|
|
65
66
|
setIsRestoring(false);
|
|
66
67
|
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
});
|
|
69
|
+
return () => {
|
|
70
|
+
unsubscribe();
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
return void 0;
|
|
73
74
|
}, [client]);
|
|
74
75
|
return /* @__PURE__ */ React.createElement(import_react_query.QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(import_react_query.IsRestoringProvider, { value: isRestoring }, children));
|
|
75
76
|
};
|
|
@@ -1 +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
|
|
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 const didRestore = React.useRef(false)\n\n React.useEffect(() => {\n refs.current = { persistOptions, onSuccess }\n })\n\n React.useEffect(() => {\n if (!didRestore.current) {\n didRestore.current = true\n setIsRestoring(true)\n const [unsubscribe, promise] = persistQueryClient({\n ...refs.current.persistOptions,\n queryClient: client,\n })\n\n promise.then(async () => {\n try {\n await refs.current.onSuccess?.()\n } finally {\n setIsRestoring(false)\n }\n })\n\n return () => {\n unsubscribe()\n }\n }\n return undefined\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;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,YAAM,CAAC,aAAa,OAAO,QAAI,qDAAmB;AAAA,QAChD,GAAG,KAAK,QAAQ;AAAA,QAChB,aAAa;AAAA,MACf,CAAC;AAED,cAAQ,KAAK,YAAY;AArC/B;AAsCQ,YAAI;AACF,kBAAM,gBAAK,SAAQ,cAAb;AAAA,QACR,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,0CAAoB,QAAiB,GAAG,SACvC,oCAAC,0CAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
|
|
@@ -13,30 +13,31 @@ var PersistQueryClientProvider = ({
|
|
|
13
13
|
}) => {
|
|
14
14
|
const [isRestoring, setIsRestoring] = React.useState(true);
|
|
15
15
|
const refs = React.useRef({ persistOptions, onSuccess });
|
|
16
|
+
const didRestore = React.useRef(false);
|
|
16
17
|
React.useEffect(() => {
|
|
17
18
|
refs.current = { persistOptions, onSuccess };
|
|
18
19
|
});
|
|
19
20
|
React.useEffect(() => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
if (!didRestore.current) {
|
|
22
|
+
didRestore.current = true;
|
|
23
|
+
setIsRestoring(true);
|
|
24
|
+
const [unsubscribe, promise] = persistQueryClient({
|
|
25
|
+
...refs.current.persistOptions,
|
|
26
|
+
queryClient: client
|
|
27
|
+
});
|
|
28
|
+
promise.then(async () => {
|
|
29
|
+
var _a, _b;
|
|
29
30
|
try {
|
|
30
31
|
await ((_b = (_a = refs.current).onSuccess) == null ? void 0 : _b.call(_a));
|
|
31
32
|
} finally {
|
|
32
33
|
setIsRestoring(false);
|
|
33
34
|
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
});
|
|
36
|
+
return () => {
|
|
37
|
+
unsubscribe();
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
return void 0;
|
|
40
41
|
}, [client]);
|
|
41
42
|
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(IsRestoringProvider, { value: isRestoring }, children));
|
|
42
43
|
};
|
|
@@ -1 +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
|
|
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 const didRestore = React.useRef(false)\n\n React.useEffect(() => {\n refs.current = { persistOptions, onSuccess }\n })\n\n React.useEffect(() => {\n if (!didRestore.current) {\n didRestore.current = true\n setIsRestoring(true)\n const [unsubscribe, promise] = persistQueryClient({\n ...refs.current.persistOptions,\n queryClient: client,\n })\n\n promise.then(async () => {\n try {\n await refs.current.onSuccess?.()\n } finally {\n setIsRestoring(false)\n }\n })\n\n return () => {\n unsubscribe()\n }\n }\n return undefined\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;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,YAAM,CAAC,aAAa,OAAO,IAAI,mBAAmB;AAAA,QAChD,GAAG,KAAK,QAAQ;AAAA,QAChB,aAAa;AAAA,MACf,CAAC;AAED,cAAQ,KAAK,YAAY;AArC/B;AAsCQ,YAAI;AACF,kBAAM,gBAAK,SAAQ,cAAb;AAAA,QACR,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,uBAAoB,QAAiB,GAAG,SACvC,oCAAC,uBAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
|
|
@@ -46,29 +46,30 @@ var PersistQueryClientProvider = ({
|
|
|
46
46
|
}) => {
|
|
47
47
|
const [isRestoring, setIsRestoring] = React.useState(true);
|
|
48
48
|
const refs = React.useRef({ persistOptions, onSuccess });
|
|
49
|
+
const didRestore = React.useRef(false);
|
|
49
50
|
React.useEffect(() => {
|
|
50
51
|
refs.current = { persistOptions, onSuccess };
|
|
51
52
|
});
|
|
52
53
|
React.useEffect(() => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
if (!didRestore.current) {
|
|
55
|
+
didRestore.current = true;
|
|
56
|
+
setIsRestoring(true);
|
|
57
|
+
const [unsubscribe, promise] = (0, import_query_persist_client_core.persistQueryClient)({
|
|
58
|
+
...refs.current.persistOptions,
|
|
59
|
+
queryClient: client
|
|
60
|
+
});
|
|
61
|
+
promise.then(async () => {
|
|
61
62
|
try {
|
|
62
63
|
await refs.current.onSuccess?.();
|
|
63
64
|
} finally {
|
|
64
65
|
setIsRestoring(false);
|
|
65
66
|
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
});
|
|
68
|
+
return () => {
|
|
69
|
+
unsubscribe();
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
return void 0;
|
|
72
73
|
}, [client]);
|
|
73
74
|
return /* @__PURE__ */ React.createElement(import_react_query.QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(import_react_query.IsRestoringProvider, { value: isRestoring }, children));
|
|
74
75
|
};
|
|
@@ -1 +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
|
|
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 const didRestore = React.useRef(false)\n\n React.useEffect(() => {\n refs.current = { persistOptions, onSuccess }\n })\n\n React.useEffect(() => {\n if (!didRestore.current) {\n didRestore.current = true\n setIsRestoring(true)\n const [unsubscribe, promise] = persistQueryClient({\n ...refs.current.persistOptions,\n queryClient: client,\n })\n\n promise.then(async () => {\n try {\n await refs.current.onSuccess?.()\n } finally {\n setIsRestoring(false)\n }\n })\n\n return () => {\n unsubscribe()\n }\n }\n return undefined\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;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,YAAM,CAAC,aAAa,OAAO,QAAI,qDAAmB;AAAA,QAChD,GAAG,KAAK,QAAQ;AAAA,QAChB,aAAa;AAAA,MACf,CAAC;AAED,cAAQ,KAAK,YAAY;AACvB,YAAI;AACF,gBAAM,KAAK,QAAQ,YAAY;AAAA,QACjC,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,0CAAoB,QAAiB,GAAG,SACvC,oCAAC,0CAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
|
|
@@ -13,29 +13,30 @@ var PersistQueryClientProvider = ({
|
|
|
13
13
|
}) => {
|
|
14
14
|
const [isRestoring, setIsRestoring] = React.useState(true);
|
|
15
15
|
const refs = React.useRef({ persistOptions, onSuccess });
|
|
16
|
+
const didRestore = React.useRef(false);
|
|
16
17
|
React.useEffect(() => {
|
|
17
18
|
refs.current = { persistOptions, onSuccess };
|
|
18
19
|
});
|
|
19
20
|
React.useEffect(() => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
if (!didRestore.current) {
|
|
22
|
+
didRestore.current = true;
|
|
23
|
+
setIsRestoring(true);
|
|
24
|
+
const [unsubscribe, promise] = persistQueryClient({
|
|
25
|
+
...refs.current.persistOptions,
|
|
26
|
+
queryClient: client
|
|
27
|
+
});
|
|
28
|
+
promise.then(async () => {
|
|
28
29
|
try {
|
|
29
30
|
await refs.current.onSuccess?.();
|
|
30
31
|
} finally {
|
|
31
32
|
setIsRestoring(false);
|
|
32
33
|
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
});
|
|
35
|
+
return () => {
|
|
36
|
+
unsubscribe();
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
return void 0;
|
|
39
40
|
}, [client]);
|
|
40
41
|
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client, ...props }, /* @__PURE__ */ React.createElement(IsRestoringProvider, { value: isRestoring }, children));
|
|
41
42
|
};
|
|
@@ -1 +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
|
|
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 const didRestore = React.useRef(false)\n\n React.useEffect(() => {\n refs.current = { persistOptions, onSuccess }\n })\n\n React.useEffect(() => {\n if (!didRestore.current) {\n didRestore.current = true\n setIsRestoring(true)\n const [unsubscribe, promise] = persistQueryClient({\n ...refs.current.persistOptions,\n queryClient: client,\n })\n\n promise.then(async () => {\n try {\n await refs.current.onSuccess?.()\n } finally {\n setIsRestoring(false)\n }\n })\n\n return () => {\n unsubscribe()\n }\n }\n return undefined\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;AACvD,QAAM,aAAmB,aAAO,KAAK;AAErC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU,EAAE,gBAAgB,UAAU;AAAA,EAC7C,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB,qBAAe,IAAI;AACnB,YAAM,CAAC,aAAa,OAAO,IAAI,mBAAmB;AAAA,QAChD,GAAG,KAAK,QAAQ;AAAA,QAChB,aAAa;AAAA,MACf,CAAC;AAED,cAAQ,KAAK,YAAY;AACvB,YAAI;AACF,gBAAM,KAAK,QAAQ,YAAY;AAAA,QACjC,UAAE;AACA,yBAAe,KAAK;AAAA,QACtB;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC,uBAAoB,QAAiB,GAAG,SACvC,oCAAC,uBAAoB,OAAO,eAAc,QAAS,CACrD;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -20,33 +20,34 @@ export const PersistQueryClientProvider = ({
|
|
|
20
20
|
}: PersistQueryClientProviderProps): JSX.Element => {
|
|
21
21
|
const [isRestoring, setIsRestoring] = React.useState(true)
|
|
22
22
|
const refs = React.useRef({ persistOptions, onSuccess })
|
|
23
|
+
const didRestore = React.useRef(false)
|
|
23
24
|
|
|
24
25
|
React.useEffect(() => {
|
|
25
26
|
refs.current = { persistOptions, onSuccess }
|
|
26
27
|
})
|
|
27
28
|
|
|
28
29
|
React.useEffect(() => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
if (!didRestore.current) {
|
|
31
|
+
didRestore.current = true
|
|
32
|
+
setIsRestoring(true)
|
|
33
|
+
const [unsubscribe, promise] = persistQueryClient({
|
|
34
|
+
...refs.current.persistOptions,
|
|
35
|
+
queryClient: client,
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
promise.then(async () => {
|
|
38
39
|
try {
|
|
39
40
|
await refs.current.onSuccess?.()
|
|
40
41
|
} finally {
|
|
41
42
|
setIsRestoring(false)
|
|
42
43
|
}
|
|
43
|
-
}
|
|
44
|
-
})
|
|
44
|
+
})
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
return () => {
|
|
47
|
+
unsubscribe()
|
|
48
|
+
}
|
|
49
49
|
}
|
|
50
|
+
return undefined
|
|
50
51
|
}, [client])
|
|
51
52
|
|
|
52
53
|
return (
|
|
@@ -629,4 +629,77 @@ describe('PersistQueryClientProvider', () => {
|
|
|
629
629
|
data: 'queryFn2',
|
|
630
630
|
})
|
|
631
631
|
})
|
|
632
|
+
|
|
633
|
+
test('should only restore once in StrictMode', async () => {
|
|
634
|
+
let restoreCount = 0
|
|
635
|
+
const createPersister = (): Persister => {
|
|
636
|
+
let storedState: PersistedClient | undefined
|
|
637
|
+
|
|
638
|
+
return {
|
|
639
|
+
async persistClient(persistClient) {
|
|
640
|
+
storedState = persistClient
|
|
641
|
+
},
|
|
642
|
+
async restoreClient() {
|
|
643
|
+
restoreCount++
|
|
644
|
+
await sleep(10)
|
|
645
|
+
return storedState
|
|
646
|
+
},
|
|
647
|
+
removeClient() {
|
|
648
|
+
storedState = undefined
|
|
649
|
+
},
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
const key = queryKey()
|
|
654
|
+
|
|
655
|
+
const queryClient = createQueryClient()
|
|
656
|
+
await queryClient.prefetchQuery({
|
|
657
|
+
queryKey: key,
|
|
658
|
+
queryFn: () => Promise.resolve('hydrated'),
|
|
659
|
+
})
|
|
660
|
+
|
|
661
|
+
const persister = createPersister()
|
|
662
|
+
|
|
663
|
+
const onSuccess = vi.fn()
|
|
664
|
+
|
|
665
|
+
await persistQueryClientSave({ queryClient, persister })
|
|
666
|
+
|
|
667
|
+
queryClient.clear()
|
|
668
|
+
|
|
669
|
+
function Page() {
|
|
670
|
+
const state = useQuery({
|
|
671
|
+
queryKey: key,
|
|
672
|
+
queryFn: async () => {
|
|
673
|
+
await sleep(10)
|
|
674
|
+
return 'fetched'
|
|
675
|
+
},
|
|
676
|
+
})
|
|
677
|
+
|
|
678
|
+
return (
|
|
679
|
+
<div>
|
|
680
|
+
<h1>{state.data}</h1>
|
|
681
|
+
<h2>fetchStatus: {state.fetchStatus}</h2>
|
|
682
|
+
</div>
|
|
683
|
+
)
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
const rendered = render(
|
|
687
|
+
<React.StrictMode>
|
|
688
|
+
<PersistQueryClientProvider
|
|
689
|
+
client={queryClient}
|
|
690
|
+
persistOptions={{ persister }}
|
|
691
|
+
onSuccess={onSuccess}
|
|
692
|
+
>
|
|
693
|
+
<Page />
|
|
694
|
+
</PersistQueryClientProvider>
|
|
695
|
+
</React.StrictMode>,
|
|
696
|
+
)
|
|
697
|
+
|
|
698
|
+
await waitFor(() => rendered.getByText('fetchStatus: idle'))
|
|
699
|
+
await waitFor(() => rendered.getByText('hydrated'))
|
|
700
|
+
await waitFor(() => rendered.getByText('fetched'))
|
|
701
|
+
|
|
702
|
+
expect(onSuccess).toHaveBeenCalledTimes(1)
|
|
703
|
+
expect(restoreCount).toBe(1)
|
|
704
|
+
})
|
|
632
705
|
})
|