@tanstack/react-query 5.76.0 → 5.76.2
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/HydrationBoundary.cjs +1 -5
- package/build/legacy/HydrationBoundary.cjs.map +1 -1
- package/build/legacy/HydrationBoundary.js +1 -5
- package/build/legacy/HydrationBoundary.js.map +1 -1
- package/build/modern/HydrationBoundary.cjs +1 -5
- package/build/modern/HydrationBoundary.cjs.map +1 -1
- package/build/modern/HydrationBoundary.js +1 -5
- package/build/modern/HydrationBoundary.js.map +1 -1
- package/package.json +4 -4
- package/src/HydrationBoundary.tsx +7 -12
|
@@ -37,9 +37,6 @@ module.exports = __toCommonJS(HydrationBoundary_exports);
|
|
|
37
37
|
var React = __toESM(require("react"), 1);
|
|
38
38
|
var import_query_core = require("@tanstack/query-core");
|
|
39
39
|
var import_QueryClientProvider = require("./QueryClientProvider.cjs");
|
|
40
|
-
var hasProperty = (obj, key) => {
|
|
41
|
-
return typeof obj === "object" && obj !== null && key in obj;
|
|
42
|
-
};
|
|
43
40
|
var HydrationBoundary = ({
|
|
44
41
|
children,
|
|
45
42
|
options = {},
|
|
@@ -64,8 +61,7 @@ var HydrationBoundary = ({
|
|
|
64
61
|
if (!existingQuery) {
|
|
65
62
|
newQueries.push(dehydratedQuery);
|
|
66
63
|
} else {
|
|
67
|
-
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt ||
|
|
68
|
-
hasProperty(dehydratedQuery.promise, "status") && hasProperty(existingQuery.promise, "status") && dehydratedQuery.promise.status !== existingQuery.promise.status;
|
|
64
|
+
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt || dehydratedQuery.promise && existingQuery.state.status !== "pending" && dehydratedQuery.dehydratedAt !== void 0 && dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt;
|
|
69
65
|
const queryAlreadyQueued = hydrationQueue == null ? void 0 : hydrationQueue.find(
|
|
70
66
|
(query) => query.queryHash === dehydratedQuery.queryHash
|
|
71
67
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\nexport const HydrationBoundary = ({\n children,\n options = {},\n state,\n queryClient,\n}: HydrationBoundaryProps) => {\n const client = useQueryClient(queryClient)\n const [hydrationQueue, setHydrationQueue] = React.useState<\n DehydratedState['queries'] | undefined\n >()\n\n const optionsRef = React.useRef(options)\n optionsRef.current = options\n\n // This useMemo is for performance reasons only, everything inside it must\n // be safe to run in every render and code here should be read as \"in render\".\n //\n // This code needs to happen during the render phase, because after initial\n // SSR, hydration needs to happen _before_ children render. Also, if hydrating\n // during a transition, we want to hydrate as much as is safe in render so\n // we can prerender as much as possible.\n //\n // For any queries that already exist in the cache, we want to hold back on\n // hydrating until _after_ the render phase. The reason for this is that during\n // transitions, we don't want the existing queries and observers to update to\n // the new data on the current page, only _after_ the transition is committed.\n // If the transition is aborted, we will have hydrated any _new_ queries, but\n // we throw away the fresh data for any existing ones to avoid unexpectedly\n // updating the UI.\n React.useMemo(() => {\n if (state) {\n if (typeof state !== 'object') {\n return\n }\n\n const queryCache = client.getQueryCache()\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const queries = (state as DehydratedState).queries || []\n\n const newQueries: DehydratedState['queries'] = []\n const existingQueries: DehydratedState['queries'] = []\n for (const dehydratedQuery of queries) {\n const existingQuery = queryCache.get(dehydratedQuery.queryHash)\n\n if (!existingQuery) {\n newQueries.push(dehydratedQuery)\n } else {\n const hydrationIsNewer =\n dehydratedQuery.state.dataUpdatedAt >\n existingQuery.state.dataUpdatedAt ||\n (dehydratedQuery.promise &&\n existingQuery.state.status !== 'pending' &&\n dehydratedQuery.dehydratedAt !== undefined &&\n dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)\n\n const queryAlreadyQueued = hydrationQueue?.find(\n (query) => query.queryHash === dehydratedQuery.queryHash,\n )\n\n if (\n hydrationIsNewer &&\n (!queryAlreadyQueued ||\n dehydratedQuery.state.dataUpdatedAt >\n queryAlreadyQueued.state.dataUpdatedAt)\n ) {\n existingQueries.push(dehydratedQuery)\n }\n }\n }\n\n if (newQueries.length > 0) {\n // It's actually fine to call this with queries/state that already exists\n // in the cache, or is older. hydrate() is idempotent for queries.\n hydrate(client, { queries: newQueries }, optionsRef.current)\n }\n if (existingQueries.length > 0) {\n setHydrationQueue((prev) =>\n prev ? [...prev, ...existingQueries] : existingQueries,\n )\n }\n }\n }, [client, hydrationQueue, state])\n\n React.useEffect(() => {\n if (hydrationQueue) {\n hydrate(client, { queries: hydrationQueue }, optionsRef.current)\n // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n setHydrationQueue(undefined)\n }\n }, [client, hydrationQueue])\n\n return children as React.ReactElement\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,YAAuB;AAEvB,wBAAwB;AACxB,iCAA+B;AAoBxB,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,aAAS,2CAAe,WAAW;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAU,eAEhD;AAEF,QAAM,aAAmB,aAAO,OAAO;AACvC,aAAW,UAAU;AAiBrB,EAAM,cAAQ,MAAM;AAClB,QAAI,OAAO;AACT,UAAI,OAAO,UAAU,UAAU;AAC7B;AAAA,MACF;AAEA,YAAM,aAAa,OAAO,cAAc;AAExC,YAAM,UAAW,MAA0B,WAAW,CAAC;AAEvD,YAAM,aAAyC,CAAC;AAChD,YAAM,kBAA8C,CAAC;AACrD,iBAAW,mBAAmB,SAAS;AACrC,cAAM,gBAAgB,WAAW,IAAI,gBAAgB,SAAS;AAE9D,YAAI,CAAC,eAAe;AAClB,qBAAW,KAAK,eAAe;AAAA,QACjC,OAAO;AACL,gBAAM,mBACJ,gBAAgB,MAAM,gBACpB,cAAc,MAAM,iBACrB,gBAAgB,WACf,cAAc,MAAM,WAAW,aAC/B,gBAAgB,iBAAiB,UACjC,gBAAgB,eAAe,cAAc,MAAM;AAEvD,gBAAM,qBAAqB,iDAAgB;AAAA,YACzC,CAAC,UAAU,MAAM,cAAc,gBAAgB;AAAA;AAGjD,cACE,qBACC,CAAC,sBACA,gBAAgB,MAAM,gBACpB,mBAAmB,MAAM,gBAC7B;AACA,4BAAgB,KAAK,eAAe;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,GAAG;AAGzB,uCAAQ,QAAQ,EAAE,SAAS,WAAW,GAAG,WAAW,OAAO;AAAA,MAC7D;AACA,UAAI,gBAAgB,SAAS,GAAG;AAC9B;AAAA,UAAkB,CAAC,SACjB,OAAO,CAAC,GAAG,MAAM,GAAG,eAAe,IAAI;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,KAAK,CAAC;AAElC,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,qCAAQ,QAAQ,EAAE,SAAS,eAAe,GAAG,WAAW,OAAO;AAE/D,wBAAkB,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO;AACT;","names":[]}
|
|
@@ -4,9 +4,6 @@
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { hydrate } from "@tanstack/query-core";
|
|
6
6
|
import { useQueryClient } from "./QueryClientProvider.js";
|
|
7
|
-
var hasProperty = (obj, key) => {
|
|
8
|
-
return typeof obj === "object" && obj !== null && key in obj;
|
|
9
|
-
};
|
|
10
7
|
var HydrationBoundary = ({
|
|
11
8
|
children,
|
|
12
9
|
options = {},
|
|
@@ -31,8 +28,7 @@ var HydrationBoundary = ({
|
|
|
31
28
|
if (!existingQuery) {
|
|
32
29
|
newQueries.push(dehydratedQuery);
|
|
33
30
|
} else {
|
|
34
|
-
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt ||
|
|
35
|
-
hasProperty(dehydratedQuery.promise, "status") && hasProperty(existingQuery.promise, "status") && dehydratedQuery.promise.status !== existingQuery.promise.status;
|
|
31
|
+
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt || dehydratedQuery.promise && existingQuery.state.status !== "pending" && dehydratedQuery.dehydratedAt !== void 0 && dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt;
|
|
36
32
|
const queryAlreadyQueued = hydrationQueue == null ? void 0 : hydrationQueue.find(
|
|
37
33
|
(query) => query.queryHash === dehydratedQuery.queryHash
|
|
38
34
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\nexport const HydrationBoundary = ({\n children,\n options = {},\n state,\n queryClient,\n}: HydrationBoundaryProps) => {\n const client = useQueryClient(queryClient)\n const [hydrationQueue, setHydrationQueue] = React.useState<\n DehydratedState['queries'] | undefined\n >()\n\n const optionsRef = React.useRef(options)\n optionsRef.current = options\n\n // This useMemo is for performance reasons only, everything inside it must\n // be safe to run in every render and code here should be read as \"in render\".\n //\n // This code needs to happen during the render phase, because after initial\n // SSR, hydration needs to happen _before_ children render. Also, if hydrating\n // during a transition, we want to hydrate as much as is safe in render so\n // we can prerender as much as possible.\n //\n // For any queries that already exist in the cache, we want to hold back on\n // hydrating until _after_ the render phase. The reason for this is that during\n // transitions, we don't want the existing queries and observers to update to\n // the new data on the current page, only _after_ the transition is committed.\n // If the transition is aborted, we will have hydrated any _new_ queries, but\n // we throw away the fresh data for any existing ones to avoid unexpectedly\n // updating the UI.\n React.useMemo(() => {\n if (state) {\n if (typeof state !== 'object') {\n return\n }\n\n const queryCache = client.getQueryCache()\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const queries = (state as DehydratedState).queries || []\n\n const newQueries: DehydratedState['queries'] = []\n const existingQueries: DehydratedState['queries'] = []\n for (const dehydratedQuery of queries) {\n const existingQuery = queryCache.get(dehydratedQuery.queryHash)\n\n if (!existingQuery) {\n newQueries.push(dehydratedQuery)\n } else {\n const hydrationIsNewer =\n dehydratedQuery.state.dataUpdatedAt >\n existingQuery.state.dataUpdatedAt ||\n (dehydratedQuery.promise &&\n existingQuery.state.status !== 'pending' &&\n dehydratedQuery.dehydratedAt !== undefined &&\n dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)\n\n const queryAlreadyQueued = hydrationQueue?.find(\n (query) => query.queryHash === dehydratedQuery.queryHash,\n )\n\n if (\n hydrationIsNewer &&\n (!queryAlreadyQueued ||\n dehydratedQuery.state.dataUpdatedAt >\n queryAlreadyQueued.state.dataUpdatedAt)\n ) {\n existingQueries.push(dehydratedQuery)\n }\n }\n }\n\n if (newQueries.length > 0) {\n // It's actually fine to call this with queries/state that already exists\n // in the cache, or is older. hydrate() is idempotent for queries.\n hydrate(client, { queries: newQueries }, optionsRef.current)\n }\n if (existingQueries.length > 0) {\n setHydrationQueue((prev) =>\n prev ? [...prev, ...existingQueries] : existingQueries,\n )\n }\n }\n }, [client, hydrationQueue, state])\n\n React.useEffect(() => {\n if (hydrationQueue) {\n hydrate(client, { queries: hydrationQueue }, optionsRef.current)\n // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n setHydrationQueue(undefined)\n }\n }, [client, hydrationQueue])\n\n return children as React.ReactElement\n}\n"],"mappings":";;;AAGA,YAAY,WAAW;AAEvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAoBxB,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,SAAS,eAAe,WAAW;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAU,eAEhD;AAEF,QAAM,aAAmB,aAAO,OAAO;AACvC,aAAW,UAAU;AAiBrB,EAAM,cAAQ,MAAM;AAClB,QAAI,OAAO;AACT,UAAI,OAAO,UAAU,UAAU;AAC7B;AAAA,MACF;AAEA,YAAM,aAAa,OAAO,cAAc;AAExC,YAAM,UAAW,MAA0B,WAAW,CAAC;AAEvD,YAAM,aAAyC,CAAC;AAChD,YAAM,kBAA8C,CAAC;AACrD,iBAAW,mBAAmB,SAAS;AACrC,cAAM,gBAAgB,WAAW,IAAI,gBAAgB,SAAS;AAE9D,YAAI,CAAC,eAAe;AAClB,qBAAW,KAAK,eAAe;AAAA,QACjC,OAAO;AACL,gBAAM,mBACJ,gBAAgB,MAAM,gBACpB,cAAc,MAAM,iBACrB,gBAAgB,WACf,cAAc,MAAM,WAAW,aAC/B,gBAAgB,iBAAiB,UACjC,gBAAgB,eAAe,cAAc,MAAM;AAEvD,gBAAM,qBAAqB,iDAAgB;AAAA,YACzC,CAAC,UAAU,MAAM,cAAc,gBAAgB;AAAA;AAGjD,cACE,qBACC,CAAC,sBACA,gBAAgB,MAAM,gBACpB,mBAAmB,MAAM,gBAC7B;AACA,4BAAgB,KAAK,eAAe;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,GAAG;AAGzB,gBAAQ,QAAQ,EAAE,SAAS,WAAW,GAAG,WAAW,OAAO;AAAA,MAC7D;AACA,UAAI,gBAAgB,SAAS,GAAG;AAC9B;AAAA,UAAkB,CAAC,SACjB,OAAO,CAAC,GAAG,MAAM,GAAG,eAAe,IAAI;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,KAAK,CAAC;AAElC,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,cAAQ,QAAQ,EAAE,SAAS,eAAe,GAAG,WAAW,OAAO;AAE/D,wBAAkB,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO;AACT;","names":[]}
|
|
@@ -37,9 +37,6 @@ module.exports = __toCommonJS(HydrationBoundary_exports);
|
|
|
37
37
|
var React = __toESM(require("react"), 1);
|
|
38
38
|
var import_query_core = require("@tanstack/query-core");
|
|
39
39
|
var import_QueryClientProvider = require("./QueryClientProvider.cjs");
|
|
40
|
-
var hasProperty = (obj, key) => {
|
|
41
|
-
return typeof obj === "object" && obj !== null && key in obj;
|
|
42
|
-
};
|
|
43
40
|
var HydrationBoundary = ({
|
|
44
41
|
children,
|
|
45
42
|
options = {},
|
|
@@ -64,8 +61,7 @@ var HydrationBoundary = ({
|
|
|
64
61
|
if (!existingQuery) {
|
|
65
62
|
newQueries.push(dehydratedQuery);
|
|
66
63
|
} else {
|
|
67
|
-
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt ||
|
|
68
|
-
hasProperty(dehydratedQuery.promise, "status") && hasProperty(existingQuery.promise, "status") && dehydratedQuery.promise.status !== existingQuery.promise.status;
|
|
64
|
+
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt || dehydratedQuery.promise && existingQuery.state.status !== "pending" && dehydratedQuery.dehydratedAt !== void 0 && dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt;
|
|
69
65
|
const queryAlreadyQueued = hydrationQueue?.find(
|
|
70
66
|
(query) => query.queryHash === dehydratedQuery.queryHash
|
|
71
67
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\nexport const HydrationBoundary = ({\n children,\n options = {},\n state,\n queryClient,\n}: HydrationBoundaryProps) => {\n const client = useQueryClient(queryClient)\n const [hydrationQueue, setHydrationQueue] = React.useState<\n DehydratedState['queries'] | undefined\n >()\n\n const optionsRef = React.useRef(options)\n optionsRef.current = options\n\n // This useMemo is for performance reasons only, everything inside it must\n // be safe to run in every render and code here should be read as \"in render\".\n //\n // This code needs to happen during the render phase, because after initial\n // SSR, hydration needs to happen _before_ children render. Also, if hydrating\n // during a transition, we want to hydrate as much as is safe in render so\n // we can prerender as much as possible.\n //\n // For any queries that already exist in the cache, we want to hold back on\n // hydrating until _after_ the render phase. The reason for this is that during\n // transitions, we don't want the existing queries and observers to update to\n // the new data on the current page, only _after_ the transition is committed.\n // If the transition is aborted, we will have hydrated any _new_ queries, but\n // we throw away the fresh data for any existing ones to avoid unexpectedly\n // updating the UI.\n React.useMemo(() => {\n if (state) {\n if (typeof state !== 'object') {\n return\n }\n\n const queryCache = client.getQueryCache()\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const queries = (state as DehydratedState).queries || []\n\n const newQueries: DehydratedState['queries'] = []\n const existingQueries: DehydratedState['queries'] = []\n for (const dehydratedQuery of queries) {\n const existingQuery = queryCache.get(dehydratedQuery.queryHash)\n\n if (!existingQuery) {\n newQueries.push(dehydratedQuery)\n } else {\n const hydrationIsNewer =\n dehydratedQuery.state.dataUpdatedAt >\n existingQuery.state.dataUpdatedAt ||\n (dehydratedQuery.promise &&\n existingQuery.state.status !== 'pending' &&\n dehydratedQuery.dehydratedAt !== undefined &&\n dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)\n\n const queryAlreadyQueued = hydrationQueue?.find(\n (query) => query.queryHash === dehydratedQuery.queryHash,\n )\n\n if (\n hydrationIsNewer &&\n (!queryAlreadyQueued ||\n dehydratedQuery.state.dataUpdatedAt >\n queryAlreadyQueued.state.dataUpdatedAt)\n ) {\n existingQueries.push(dehydratedQuery)\n }\n }\n }\n\n if (newQueries.length > 0) {\n // It's actually fine to call this with queries/state that already exists\n // in the cache, or is older. hydrate() is idempotent for queries.\n hydrate(client, { queries: newQueries }, optionsRef.current)\n }\n if (existingQueries.length > 0) {\n setHydrationQueue((prev) =>\n prev ? [...prev, ...existingQueries] : existingQueries,\n )\n }\n }\n }, [client, hydrationQueue, state])\n\n React.useEffect(() => {\n if (hydrationQueue) {\n hydrate(client, { queries: hydrationQueue }, optionsRef.current)\n // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n setHydrationQueue(undefined)\n }\n }, [client, hydrationQueue])\n\n return children as React.ReactElement\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,YAAuB;AAEvB,wBAAwB;AACxB,iCAA+B;AAoBxB,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,aAAS,2CAAe,WAAW;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAU,eAEhD;AAEF,QAAM,aAAmB,aAAO,OAAO;AACvC,aAAW,UAAU;AAiBrB,EAAM,cAAQ,MAAM;AAClB,QAAI,OAAO;AACT,UAAI,OAAO,UAAU,UAAU;AAC7B;AAAA,MACF;AAEA,YAAM,aAAa,OAAO,cAAc;AAExC,YAAM,UAAW,MAA0B,WAAW,CAAC;AAEvD,YAAM,aAAyC,CAAC;AAChD,YAAM,kBAA8C,CAAC;AACrD,iBAAW,mBAAmB,SAAS;AACrC,cAAM,gBAAgB,WAAW,IAAI,gBAAgB,SAAS;AAE9D,YAAI,CAAC,eAAe;AAClB,qBAAW,KAAK,eAAe;AAAA,QACjC,OAAO;AACL,gBAAM,mBACJ,gBAAgB,MAAM,gBACpB,cAAc,MAAM,iBACrB,gBAAgB,WACf,cAAc,MAAM,WAAW,aAC/B,gBAAgB,iBAAiB,UACjC,gBAAgB,eAAe,cAAc,MAAM;AAEvD,gBAAM,qBAAqB,gBAAgB;AAAA,YACzC,CAAC,UAAU,MAAM,cAAc,gBAAgB;AAAA,UACjD;AAEA,cACE,qBACC,CAAC,sBACA,gBAAgB,MAAM,gBACpB,mBAAmB,MAAM,gBAC7B;AACA,4BAAgB,KAAK,eAAe;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,GAAG;AAGzB,uCAAQ,QAAQ,EAAE,SAAS,WAAW,GAAG,WAAW,OAAO;AAAA,MAC7D;AACA,UAAI,gBAAgB,SAAS,GAAG;AAC9B;AAAA,UAAkB,CAAC,SACjB,OAAO,CAAC,GAAG,MAAM,GAAG,eAAe,IAAI;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,KAAK,CAAC;AAElC,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,qCAAQ,QAAQ,EAAE,SAAS,eAAe,GAAG,WAAW,OAAO;AAE/D,wBAAkB,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO;AACT;","names":[]}
|
|
@@ -4,9 +4,6 @@
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { hydrate } from "@tanstack/query-core";
|
|
6
6
|
import { useQueryClient } from "./QueryClientProvider.js";
|
|
7
|
-
var hasProperty = (obj, key) => {
|
|
8
|
-
return typeof obj === "object" && obj !== null && key in obj;
|
|
9
|
-
};
|
|
10
7
|
var HydrationBoundary = ({
|
|
11
8
|
children,
|
|
12
9
|
options = {},
|
|
@@ -31,8 +28,7 @@ var HydrationBoundary = ({
|
|
|
31
28
|
if (!existingQuery) {
|
|
32
29
|
newQueries.push(dehydratedQuery);
|
|
33
30
|
} else {
|
|
34
|
-
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt ||
|
|
35
|
-
hasProperty(dehydratedQuery.promise, "status") && hasProperty(existingQuery.promise, "status") && dehydratedQuery.promise.status !== existingQuery.promise.status;
|
|
31
|
+
const hydrationIsNewer = dehydratedQuery.state.dataUpdatedAt > existingQuery.state.dataUpdatedAt || dehydratedQuery.promise && existingQuery.state.status !== "pending" && dehydratedQuery.dehydratedAt !== void 0 && dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt;
|
|
36
32
|
const queryAlreadyQueued = hydrationQueue?.find(
|
|
37
33
|
(query) => query.queryHash === dehydratedQuery.queryHash
|
|
38
34
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["/* eslint-disable react-compiler/react-compiler */\n\n'use client'\nimport * as React from 'react'\n\nimport { hydrate } from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\n\nexport interface HydrationBoundaryProps {\n state?: unknown\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: React.ReactNode\n queryClient?: QueryClient\n}\n\nexport const HydrationBoundary = ({\n children,\n options = {},\n state,\n queryClient,\n}: HydrationBoundaryProps) => {\n const client = useQueryClient(queryClient)\n const [hydrationQueue, setHydrationQueue] = React.useState<\n DehydratedState['queries'] | undefined\n >()\n\n const optionsRef = React.useRef(options)\n optionsRef.current = options\n\n // This useMemo is for performance reasons only, everything inside it must\n // be safe to run in every render and code here should be read as \"in render\".\n //\n // This code needs to happen during the render phase, because after initial\n // SSR, hydration needs to happen _before_ children render. Also, if hydrating\n // during a transition, we want to hydrate as much as is safe in render so\n // we can prerender as much as possible.\n //\n // For any queries that already exist in the cache, we want to hold back on\n // hydrating until _after_ the render phase. The reason for this is that during\n // transitions, we don't want the existing queries and observers to update to\n // the new data on the current page, only _after_ the transition is committed.\n // If the transition is aborted, we will have hydrated any _new_ queries, but\n // we throw away the fresh data for any existing ones to avoid unexpectedly\n // updating the UI.\n React.useMemo(() => {\n if (state) {\n if (typeof state !== 'object') {\n return\n }\n\n const queryCache = client.getQueryCache()\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const queries = (state as DehydratedState).queries || []\n\n const newQueries: DehydratedState['queries'] = []\n const existingQueries: DehydratedState['queries'] = []\n for (const dehydratedQuery of queries) {\n const existingQuery = queryCache.get(dehydratedQuery.queryHash)\n\n if (!existingQuery) {\n newQueries.push(dehydratedQuery)\n } else {\n const hydrationIsNewer =\n dehydratedQuery.state.dataUpdatedAt >\n existingQuery.state.dataUpdatedAt ||\n (dehydratedQuery.promise &&\n existingQuery.state.status !== 'pending' &&\n dehydratedQuery.dehydratedAt !== undefined &&\n dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)\n\n const queryAlreadyQueued = hydrationQueue?.find(\n (query) => query.queryHash === dehydratedQuery.queryHash,\n )\n\n if (\n hydrationIsNewer &&\n (!queryAlreadyQueued ||\n dehydratedQuery.state.dataUpdatedAt >\n queryAlreadyQueued.state.dataUpdatedAt)\n ) {\n existingQueries.push(dehydratedQuery)\n }\n }\n }\n\n if (newQueries.length > 0) {\n // It's actually fine to call this with queries/state that already exists\n // in the cache, or is older. hydrate() is idempotent for queries.\n hydrate(client, { queries: newQueries }, optionsRef.current)\n }\n if (existingQueries.length > 0) {\n setHydrationQueue((prev) =>\n prev ? [...prev, ...existingQueries] : existingQueries,\n )\n }\n }\n }, [client, hydrationQueue, state])\n\n React.useEffect(() => {\n if (hydrationQueue) {\n hydrate(client, { queries: hydrationQueue }, optionsRef.current)\n // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n setHydrationQueue(undefined)\n }\n }, [client, hydrationQueue])\n\n return children as React.ReactElement\n}\n"],"mappings":";;;AAGA,YAAY,WAAW;AAEvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAoBxB,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,SAAS,eAAe,WAAW;AACzC,QAAM,CAAC,gBAAgB,iBAAiB,IAAU,eAEhD;AAEF,QAAM,aAAmB,aAAO,OAAO;AACvC,aAAW,UAAU;AAiBrB,EAAM,cAAQ,MAAM;AAClB,QAAI,OAAO;AACT,UAAI,OAAO,UAAU,UAAU;AAC7B;AAAA,MACF;AAEA,YAAM,aAAa,OAAO,cAAc;AAExC,YAAM,UAAW,MAA0B,WAAW,CAAC;AAEvD,YAAM,aAAyC,CAAC;AAChD,YAAM,kBAA8C,CAAC;AACrD,iBAAW,mBAAmB,SAAS;AACrC,cAAM,gBAAgB,WAAW,IAAI,gBAAgB,SAAS;AAE9D,YAAI,CAAC,eAAe;AAClB,qBAAW,KAAK,eAAe;AAAA,QACjC,OAAO;AACL,gBAAM,mBACJ,gBAAgB,MAAM,gBACpB,cAAc,MAAM,iBACrB,gBAAgB,WACf,cAAc,MAAM,WAAW,aAC/B,gBAAgB,iBAAiB,UACjC,gBAAgB,eAAe,cAAc,MAAM;AAEvD,gBAAM,qBAAqB,gBAAgB;AAAA,YACzC,CAAC,UAAU,MAAM,cAAc,gBAAgB;AAAA,UACjD;AAEA,cACE,qBACC,CAAC,sBACA,gBAAgB,MAAM,gBACpB,mBAAmB,MAAM,gBAC7B;AACA,4BAAgB,KAAK,eAAe;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,GAAG;AAGzB,gBAAQ,QAAQ,EAAE,SAAS,WAAW,GAAG,WAAW,OAAO;AAAA,MAC7D;AACA,UAAI,gBAAgB,SAAS,GAAG;AAC9B;AAAA,UAAkB,CAAC,SACjB,OAAO,CAAC,GAAG,MAAM,GAAG,eAAe,IAAI;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,KAAK,CAAC;AAElC,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,cAAQ,QAAQ,EAAE,SAAS,eAAe,GAAG,WAAW,OAAO;AAE/D,wBAAkB,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO;AACT;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-query",
|
|
3
|
-
"version": "5.76.
|
|
3
|
+
"version": "5.76.2",
|
|
4
4
|
"description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"!build/codemods/**/__tests__"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@tanstack/query-core": "5.76.
|
|
47
|
+
"@tanstack/query-core": "5.76.2"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@testing-library/react": "^16.1.0",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"react": "^19.0.0",
|
|
58
58
|
"react-dom": "^19.0.0",
|
|
59
59
|
"react-error-boundary": "^4.1.2",
|
|
60
|
-
"@tanstack/query-
|
|
61
|
-
"@tanstack/query-
|
|
60
|
+
"@tanstack/query-persist-client-core": "5.76.2",
|
|
61
|
+
"@tanstack/query-test-utils": "0.0.0"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"react": "^18 || ^19"
|
|
@@ -24,13 +24,6 @@ export interface HydrationBoundaryProps {
|
|
|
24
24
|
queryClient?: QueryClient
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
const hasProperty = <TKey extends string>(
|
|
28
|
-
obj: unknown,
|
|
29
|
-
key: TKey,
|
|
30
|
-
): obj is { [k in TKey]: unknown } => {
|
|
31
|
-
return typeof obj === 'object' && obj !== null && key in obj
|
|
32
|
-
}
|
|
33
|
-
|
|
34
27
|
export const HydrationBoundary = ({
|
|
35
28
|
children,
|
|
36
29
|
options = {},
|
|
@@ -45,7 +38,7 @@ export const HydrationBoundary = ({
|
|
|
45
38
|
const optionsRef = React.useRef(options)
|
|
46
39
|
optionsRef.current = options
|
|
47
40
|
|
|
48
|
-
// This useMemo is for performance reasons only, everything inside it
|
|
41
|
+
// This useMemo is for performance reasons only, everything inside it must
|
|
49
42
|
// be safe to run in every render and code here should be read as "in render".
|
|
50
43
|
//
|
|
51
44
|
// This code needs to happen during the render phase, because after initial
|
|
@@ -80,10 +73,11 @@ export const HydrationBoundary = ({
|
|
|
80
73
|
} else {
|
|
81
74
|
const hydrationIsNewer =
|
|
82
75
|
dehydratedQuery.state.dataUpdatedAt >
|
|
83
|
-
existingQuery.state.dataUpdatedAt ||
|
|
84
|
-
(
|
|
85
|
-
|
|
86
|
-
dehydratedQuery.
|
|
76
|
+
existingQuery.state.dataUpdatedAt ||
|
|
77
|
+
(dehydratedQuery.promise &&
|
|
78
|
+
existingQuery.state.status !== 'pending' &&
|
|
79
|
+
dehydratedQuery.dehydratedAt !== undefined &&
|
|
80
|
+
dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)
|
|
87
81
|
|
|
88
82
|
const queryAlreadyQueued = hydrationQueue?.find(
|
|
89
83
|
(query) => query.queryHash === dehydratedQuery.queryHash,
|
|
@@ -116,6 +110,7 @@ export const HydrationBoundary = ({
|
|
|
116
110
|
React.useEffect(() => {
|
|
117
111
|
if (hydrationQueue) {
|
|
118
112
|
hydrate(client, { queries: hydrationQueue }, optionsRef.current)
|
|
113
|
+
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
|
|
119
114
|
setHydrationQueue(undefined)
|
|
120
115
|
}
|
|
121
116
|
}, [client, hydrationQueue])
|