@suspensive/react-query-4 3.19.5 → 4.0.0-next.0

package/dist/PrefetchQuery-DQFTAE7M.mjs

@@ -0,0 +1,20 @@
+import { usePrefetchQuery } from "@tanstack/react-query";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/PrefetchQuery.tsx
+/**
+* A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
+* @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}
+* @example
+* ```tsx
+* <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
+* ```
+*/
+function PrefetchQuery(options) {
+	usePrefetchQuery(options);
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+
+//#endregion
+export { PrefetchQuery as t };
+//# sourceMappingURL=PrefetchQuery-DQFTAE7M.mjs.map

package/dist/PrefetchQuery-DQFTAE7M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrefetchQuery-DQFTAE7M.mjs","names":[],"sources":["../src/PrefetchQuery.tsx"],"sourcesContent":["'use client'\n\nimport { type FetchQueryOptions, type QueryKey, type WithRequired, usePrefetchQuery } from '@tanstack/react-query'\n\n/**\n * A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.\n * @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}\n * @example\n * ```tsx\n * <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />\n * ```\n */\nexport function PrefetchQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: WithRequired<FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'>) {\n  usePrefetchQuery(options)\n  return <></>\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,cAKd,SAA8F;AAC9F,kBAAiB,QAAQ;AACzB,QAAO,iCAAK"}

package/dist/PrefetchQuery-PBReP6tu.cjs

@@ -0,0 +1,25 @@
+let __tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/PrefetchQuery.tsx
+/**
+* A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
+* @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}
+* @example
+* ```tsx
+* <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
+* ```
+*/
+function PrefetchQuery(options) {
+	(0, __tanstack_react_query.usePrefetchQuery)(options);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+}
+
+//#endregion
+Object.defineProperty(exports, 'PrefetchQuery', {
+  enumerable: true,
+  get: function () {
+    return PrefetchQuery;
+  }
+});
+//# sourceMappingURL=PrefetchQuery-PBReP6tu.cjs.map

package/dist/PrefetchQuery-PBReP6tu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrefetchQuery-PBReP6tu.cjs","names":[],"sources":["../src/PrefetchQuery.tsx"],"sourcesContent":["'use client'\n\nimport { type FetchQueryOptions, type QueryKey, type WithRequired, usePrefetchQuery } from '@tanstack/react-query'\n\n/**\n * A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.\n * @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}\n * @example\n * ```tsx\n * <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />\n * ```\n */\nexport function PrefetchQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: WithRequired<FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'>) {\n  usePrefetchQuery(options)\n  return <></>\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,cAKd,SAA8F;AAC9F,8CAAiB,QAAQ;AACzB,QAAO,0EAAK"}

package/dist/PrefetchQuery.cjs

@@ -1,23 +1,5 @@
 'use client';
 
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_usePrefetchQuery = require('./usePrefetchQuery.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
+const require_PrefetchQuery = require('./PrefetchQuery-PBReP6tu.cjs');
 
-//#region src/PrefetchQuery.tsx
-/**
-* A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
-* @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}
-* @example
-* ```tsx
-* <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
-* ```
-*/
-function PrefetchQuery(options) {
-	require_usePrefetchQuery.usePrefetchQuery(options);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
-}
-
-//#endregion
-exports.PrefetchQuery = PrefetchQuery;
-//# sourceMappingURL=PrefetchQuery.cjs.map
+exports.PrefetchQuery = require_PrefetchQuery.PrefetchQuery;

package/dist/PrefetchQuery.d.cts

@@ -1,16 +1,2 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { FetchQueryOptions, QueryKey } from "@tanstack/react-query";
-
-//#region src/PrefetchQuery.d.ts
-/**
- * A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
- * @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}
- * @example
- * ```tsx
- * <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
- * ```
- */
-declare function PrefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { PrefetchQuery };
-//# sourceMappingURL=PrefetchQuery.d.cts.map
+import { t as PrefetchQuery } from "./PrefetchQuery-CqWzm0Tu.cjs";
+export { PrefetchQuery };

package/dist/PrefetchQuery.d.mts

@@ -1,16 +1,2 @@
-import { FetchQueryOptions, QueryKey } from "@tanstack/react-query";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/PrefetchQuery.d.ts
-/**
- * A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
- * @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}
- * @example
- * ```tsx
- * <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
- * ```
- */
-declare function PrefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { PrefetchQuery };
-//# sourceMappingURL=PrefetchQuery.d.mts.map
+import { t as PrefetchQuery } from "./PrefetchQuery-BmQt_WJk.mjs";
+export { PrefetchQuery };

package/dist/PrefetchQuery.mjs

@@ -1,22 +1,5 @@
 'use client';
 
-import { usePrefetchQuery } from "./usePrefetchQuery.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { t as PrefetchQuery } from "./PrefetchQuery-DQFTAE7M.mjs";
 
-//#region src/PrefetchQuery.tsx
-/**
-* A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
-* @see {@link https://suspensive.org/docs/react-query/PrefetchQuery Suspensive Docs}
-* @example
-* ```tsx
-* <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
-* ```
-*/
-function PrefetchQuery(options) {
-	usePrefetchQuery(options);
-	return /* @__PURE__ */ jsx(Fragment, {});
-}
-
-//#endregion
-export { PrefetchQuery };
-//# sourceMappingURL=PrefetchQuery.mjs.map
+export { PrefetchQuery };

package/dist/QueriesHydration-B28Xmf0f.d.cts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { HydrateProps, OmitKeyof, QueryClient, QueryOptions, UseInfiniteQueryOptions, WithRequired } from "@tanstack/react-query";
+import { ReactNode } from "react";
+
+//#region src/QueriesHydration.d.ts
+
+/**
+ * A server component that fetches multiple queries on the server and hydrates them to the client.
+ *
+ * @experimental This component is experimental and may be changed or removed in the future.
+ *
+ * @description
+ * QueriesHydration is designed for React Server Components (RSC).
+ * It pre-fetches multiple queries on the server side and automatically hydrates
+ * the data to the client, enabling seamless data synchronization between server and client.
+ *
+ * When errors occur during server-side fetching, the component gracefully falls back
+ * to client-side rendering, ensuring your application remains resilient.
+ *
+ * @example
+ * ```tsx
+ * // app/page.tsx (Server Component)
+ * import { Suspense } from 'react'
+ * import { QueriesHydration } from '@suspensive/react-query'
+ * import { queryOptions } from '@tanstack/react-query'
+ *
+ * const userQueryOptions = (userId: string) => queryOptions({
+ *   queryKey: ['user', userId],
+ *   queryFn: () => fetchUser(userId)
+ * })
+ *
+ * const postsQueryOptions = () => queryOptions({
+ *   queryKey: ['posts'],
+ *   queryFn: () => fetchPosts()
+ * })
+ *
+ * export default function Page({ userId }: { userId: string }) {
+ *   return (
+ *     <>
+ *       <Suspense fallback={<div>Loading user...</div>}>
+ *         <QueriesHydration queries={[userQueryOptions(userId)]}>
+ *           <UserProfile />
+ *         </QueriesHydration>
+ *       </Suspense>
+ *
+ *       <Suspense fallback={<div>Loading posts...</div>}>
+ *         <QueriesHydration queries={[postsQueryOptions()]}>
+ *           <PostsList />
+ *         </QueriesHydration>
+ *       </Suspense>
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom error fallback
+ * <Suspense fallback={<div>Loading user...</div>}>
+ *   <QueriesHydration
+ *     queries={[userQueryOptions(userId)]}
+ *     skipSsrOnError={{ fallback: <div>Fetching on client...</div> }}
+ *   >
+ *     <UserProfile />
+ *   </QueriesHydration>
+ * </Suspense>
+ * ```
+ *
+ * @see {@link https://suspensive.org/docs/react-query/QueriesHydration Documentation}
+ */
+declare function QueriesHydration({
+  queries,
+  children,
+  queryClient,
+  skipSsrOnError,
+  timeout,
+  ...props
+}: {
+  /**
+   * The QueryClient instance to use for fetching queries.
+   */
+  queryClient?: QueryClient;
+  /**
+   * An array of query options or infinite query options to be fetched on the server. Each query must include a `queryKey`.
+   * You can mix regular queries and infinite queries in the same array.
+   */
+  queries: (WithRequired<QueryOptions<any, any, any, any>, 'queryKey'> | WithRequired<UseInfiniteQueryOptions<any, any, any, any, any>, 'queryKey'>)[];
+  /**
+   * Controls error handling behavior:
+   * - `true` (default): Skips SSR and falls back to client-side rendering when server fetch fails
+   * - `false`: Proceeds with SSR without hydration (retry fetching on client component server rendering)
+   * - `{ fallback: ReactNode }`: Skips SSR with custom fallback UI during client-side rendering
+   */
+  skipSsrOnError?: boolean | {
+    fallback: ReactNode;
+  };
+  /**
+   * The timeout in milliseconds for the query.
+   * If the query takes longer than the timeout, it will be considered as an error.
+   * When not set, no timeout is applied.
+   */
+  timeout?: number;
+} & OmitKeyof<HydrateProps, 'state'>): Promise<react_jsx_runtime1.JSX.Element>;
+//#endregion
+export { QueriesHydration as t };
+//# sourceMappingURL=QueriesHydration-B28Xmf0f.d.cts.map

package/dist/QueriesHydration-B28Xmf0f.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueriesHydration-B28Xmf0f.d.cts","names":[],"sources":["../src/QueriesHydration.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AA6EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAsB,gBAAA;;;;;;;;;;;gBAWN;;;;;YAMV,aAAa,gDACb,aAAa;;;;;;;;cAWD;;;;;;;;IAQd,UAAU,yBAAsB,QAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/QueriesHydration-CbLB0bKz.mjs

@@ -0,0 +1,143 @@
+import { t as _objectWithoutProperties } from "./objectWithoutProperties-DB_n2qVi.mjs";
+import { t as ClientOnly } from "./ClientOnly-D2JpP9Ba.mjs";
+import { t as _objectSpread2 } from "./objectSpread2-DTjFl4q7.mjs";
+import { Hydrate, QueryClient, dehydrate } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+
+//#region \0@oxc-project+runtime@0.101.0/helpers/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n$1) {
+		e(n$1);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n$1) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n$1);
+			}
+			function _throw(n$1) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n$1);
+			}
+			_next(void 0);
+		});
+	};
+}
+
+//#endregion
+//#region src/QueriesHydration.tsx
+const _excluded = [
+	"queries",
+	"children",
+	"queryClient",
+	"skipSsrOnError",
+	"timeout"
+];
+/**
+* A server component that fetches multiple queries on the server and hydrates them to the client.
+*
+* @experimental This component is experimental and may be changed or removed in the future.
+*
+* @description
+* QueriesHydration is designed for React Server Components (RSC).
+* It pre-fetches multiple queries on the server side and automatically hydrates
+* the data to the client, enabling seamless data synchronization between server and client.
+*
+* When errors occur during server-side fetching, the component gracefully falls back
+* to client-side rendering, ensuring your application remains resilient.
+*
+* @example
+* ```tsx
+* // app/page.tsx (Server Component)
+* import { Suspense } from 'react'
+* import { QueriesHydration } from '@suspensive/react-query'
+* import { queryOptions } from '@tanstack/react-query'
+*
+* const userQueryOptions = (userId: string) => queryOptions({
+*   queryKey: ['user', userId],
+*   queryFn: () => fetchUser(userId)
+* })
+*
+* const postsQueryOptions = () => queryOptions({
+*   queryKey: ['posts'],
+*   queryFn: () => fetchPosts()
+* })
+*
+* export default function Page({ userId }: { userId: string }) {
+*   return (
+*     <>
+*       <Suspense fallback={<div>Loading user...</div>}>
+*         <QueriesHydration queries={[userQueryOptions(userId)]}>
+*           <UserProfile />
+*         </QueriesHydration>
+*       </Suspense>
+*
+*       <Suspense fallback={<div>Loading posts...</div>}>
+*         <QueriesHydration queries={[postsQueryOptions()]}>
+*           <PostsList />
+*         </QueriesHydration>
+*       </Suspense>
+*     </>
+*   )
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With custom error fallback
+* <Suspense fallback={<div>Loading user...</div>}>
+*   <QueriesHydration
+*     queries={[userQueryOptions(userId)]}
+*     skipSsrOnError={{ fallback: <div>Fetching on client...</div> }}
+*   >
+*     <UserProfile />
+*   </QueriesHydration>
+* </Suspense>
+* ```
+*
+* @see {@link https://suspensive.org/docs/react-query/QueriesHydration Documentation}
+*/
+function QueriesHydration(_x) {
+	return _QueriesHydration.apply(this, arguments);
+}
+function _QueriesHydration() {
+	_QueriesHydration = _asyncToGenerator(function* (_ref) {
+		let { queries, children, queryClient = new QueryClient(), skipSsrOnError = true, timeout } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+		const timeoutController = timeout != null && timeout >= 0 ? createTimeoutController(timeout, `QueriesHydration: timeout after ${timeout} ms)`) : void 0;
+		try {
+			const queriesPromise = Promise.all(queries.map((query) => "getNextPageParam" in query ? queryClient.fetchInfiniteQuery(query) : queryClient.fetchQuery(query)));
+			yield timeoutController != null ? Promise.race([queriesPromise, timeoutController.promise]) : queriesPromise;
+			timeoutController === null || timeoutController === void 0 || timeoutController.clear();
+		} catch (_unused) {
+			timeoutController === null || timeoutController === void 0 || timeoutController.clear();
+			if (skipSsrOnError) return /* @__PURE__ */ jsx(ClientOnly, {
+				fallback: skipSsrOnError === true ? void 0 : skipSsrOnError.fallback,
+				children
+			});
+		}
+		return /* @__PURE__ */ jsx(Hydrate, _objectSpread2(_objectSpread2({}, props), {}, {
+			state: dehydrate(queryClient),
+			children
+		}));
+	});
+	return _QueriesHydration.apply(this, arguments);
+}
+const createTimeoutController = (ms, errorMessage) => {
+	let timerId;
+	return {
+		promise: new Promise((_, reject) => {
+			timerId = setTimeout(() => reject(new Error(errorMessage)), ms);
+		}),
+		clear: () => timerId != null && clearTimeout(timerId)
+	};
+};
+
+//#endregion
+export { QueriesHydration as t };
+//# sourceMappingURL=QueriesHydration-CbLB0bKz.mjs.map

package/dist/QueriesHydration-CbLB0bKz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueriesHydration-CbLB0bKz.mjs","names":["timerId: ReturnType<typeof setTimeout> | undefined"],"sources":["../src/QueriesHydration.tsx"],"sourcesContent":["import {\n  Hydrate,\n  type HydrateProps,\n  type OmitKeyof,\n  QueryClient,\n  type QueryOptions,\n  type UseInfiniteQueryOptions,\n  type WithRequired,\n  dehydrate,\n} from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { ClientOnly } from './components/ClientOnly'\n\n/**\n * A server component that fetches multiple queries on the server and hydrates them to the client.\n *\n * @experimental This component is experimental and may be changed or removed in the future.\n *\n * @description\n * QueriesHydration is designed for React Server Components (RSC).\n * It pre-fetches multiple queries on the server side and automatically hydrates\n * the data to the client, enabling seamless data synchronization between server and client.\n *\n * When errors occur during server-side fetching, the component gracefully falls back\n * to client-side rendering, ensuring your application remains resilient.\n *\n * @example\n * ```tsx\n * // app/page.tsx (Server Component)\n * import { Suspense } from 'react'\n * import { QueriesHydration } from '@suspensive/react-query'\n * import { queryOptions } from '@tanstack/react-query'\n *\n * const userQueryOptions = (userId: string) => queryOptions({\n *   queryKey: ['user', userId],\n *   queryFn: () => fetchUser(userId)\n * })\n *\n * const postsQueryOptions = () => queryOptions({\n *   queryKey: ['posts'],\n *   queryFn: () => fetchPosts()\n * })\n *\n * export default function Page({ userId }: { userId: string }) {\n *   return (\n *     <>\n *       <Suspense fallback={<div>Loading user...</div>}>\n *         <QueriesHydration queries={[userQueryOptions(userId)]}>\n *           <UserProfile />\n *         </QueriesHydration>\n *       </Suspense>\n *\n *       <Suspense fallback={<div>Loading posts...</div>}>\n *         <QueriesHydration queries={[postsQueryOptions()]}>\n *           <PostsList />\n *         </QueriesHydration>\n *       </Suspense>\n *     </>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom error fallback\n * <Suspense fallback={<div>Loading user...</div>}>\n *   <QueriesHydration\n *     queries={[userQueryOptions(userId)]}\n *     skipSsrOnError={{ fallback: <div>Fetching on client...</div> }}\n *   >\n *     <UserProfile />\n *   </QueriesHydration>\n * </Suspense>\n * ```\n *\n * @see {@link https://suspensive.org/docs/react-query/QueriesHydration Documentation}\n */\nexport async function QueriesHydration({\n  queries,\n  children,\n  queryClient = new QueryClient(),\n  skipSsrOnError = true,\n  timeout,\n  ...props\n}: {\n  /**\n   * The QueryClient instance to use for fetching queries.\n   */\n  queryClient?: QueryClient\n  /**\n   * An array of query options or infinite query options to be fetched on the server. Each query must include a `queryKey`.\n   * You can mix regular queries and infinite queries in the same array.\n   */\n  queries: (\n    | WithRequired<QueryOptions<any, any, any, any>, 'queryKey'>\n    | WithRequired<UseInfiniteQueryOptions<any, any, any, any, any>, 'queryKey'>\n  )[]\n  /**\n   * Controls error handling behavior:\n   * - `true` (default): Skips SSR and falls back to client-side rendering when server fetch fails\n   * - `false`: Proceeds with SSR without hydration (retry fetching on client component server rendering)\n   * - `{ fallback: ReactNode }`: Skips SSR with custom fallback UI during client-side rendering\n   */\n  skipSsrOnError?:\n    | boolean\n    | {\n        fallback: ReactNode\n      }\n  /**\n   * The timeout in milliseconds for the query.\n   * If the query takes longer than the timeout, it will be considered as an error.\n   * When not set, no timeout is applied.\n   */\n  timeout?: number\n} & OmitKeyof<HydrateProps, 'state'>) {\n  const timeoutController =\n    timeout != null && timeout >= 0\n      ? createTimeoutController(timeout, `QueriesHydration: timeout after ${timeout} ms)`)\n      : undefined\n  try {\n    const queriesPromise = Promise.all(\n      queries.map((query) =>\n        'getNextPageParam' in query ? queryClient.fetchInfiniteQuery(query) : queryClient.fetchQuery(query)\n      )\n    )\n    await (timeoutController != null ? Promise.race([queriesPromise, timeoutController.promise]) : queriesPromise)\n    timeoutController?.clear()\n  } catch {\n    timeoutController?.clear()\n    if (skipSsrOnError) {\n      return (\n        <ClientOnly fallback={skipSsrOnError === true ? undefined : skipSsrOnError.fallback}>{children}</ClientOnly>\n      )\n    }\n  }\n  return (\n    <Hydrate {...props} state={dehydrate(queryClient)}>\n      {children}\n    </Hydrate>\n  )\n}\n\nconst createTimeoutController = (ms: number, errorMessage: string) => {\n  let timerId: ReturnType<typeof setTimeout> | undefined\n  return {\n    promise: new Promise<never>((_, reject) => {\n      timerId = setTimeout(() => reject(new Error(errorMessage)), ms)\n    }),\n    clear: () => timerId != null && clearTimeout(timerId),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EE;CACA;CACA;CACA;CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AALF,SAAsB,iBAAiB;;;;wDAqCD;MArCC,EACrC,SACA,UACA,cAAc,IAAI,aAAa,EAC/B,iBAAiB,MACjB,kBACG;EAgCH,MAAM,oBACJ,WAAW,QAAQ,WAAW,IAC1B,wBAAwB,SAAS,mCAAmC,QAAQ,MAAM,GAClF;AACN,MAAI;GACF,MAAM,iBAAiB,QAAQ,IAC7B,QAAQ,KAAK,UACX,sBAAsB,QAAQ,YAAY,mBAAmB,MAAM,GAAG,YAAY,WAAW,MAAM,CACpG,CACF;AACD,SAAO,qBAAqB,OAAO,QAAQ,KAAK,CAAC,gBAAgB,kBAAkB,QAAQ,CAAC,GAAG;AAC/F,mFAAmB,OAAO;oBACpB;AACN,mFAAmB,OAAO;AAC1B,OAAI,eACF,QACE,oBAAC;IAAW,UAAU,mBAAmB,OAAO,SAAY,eAAe;IAAW;KAAsB;;AAIlH,SACE,oBAAC,2CAAY;GAAO,OAAO,UAAU,YAAY;GAC9C;KACO;;;;AAId,MAAM,2BAA2B,IAAY,iBAAyB;CACpE,IAAIA;AACJ,QAAO;EACL,SAAS,IAAI,SAAgB,GAAG,WAAW;AACzC,aAAU,iBAAiB,OAAO,IAAI,MAAM,aAAa,CAAC,EAAE,GAAG;IAC/D;EACF,aAAa,WAAW,QAAQ,aAAa,QAAQ;EACtD"}

package/dist/QueriesHydration-Cd2lBXvZ.cjs

@@ -0,0 +1,148 @@
+const require_objectWithoutProperties = require('./objectWithoutProperties-BqF6LYLG.cjs');
+const require_ClientOnly = require('./ClientOnly-BSe1ROuK.cjs');
+const require_objectSpread2 = require('./objectSpread2-DUnXKO-7.cjs');
+let __tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region \0@oxc-project+runtime@0.101.0/helpers/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n$1) {
+		e(n$1);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n$1) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n$1);
+			}
+			function _throw(n$1) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n$1);
+			}
+			_next(void 0);
+		});
+	};
+}
+
+//#endregion
+//#region src/QueriesHydration.tsx
+const _excluded = [
+	"queries",
+	"children",
+	"queryClient",
+	"skipSsrOnError",
+	"timeout"
+];
+/**
+* A server component that fetches multiple queries on the server and hydrates them to the client.
+*
+* @experimental This component is experimental and may be changed or removed in the future.
+*
+* @description
+* QueriesHydration is designed for React Server Components (RSC).
+* It pre-fetches multiple queries on the server side and automatically hydrates
+* the data to the client, enabling seamless data synchronization between server and client.
+*
+* When errors occur during server-side fetching, the component gracefully falls back
+* to client-side rendering, ensuring your application remains resilient.
+*
+* @example
+* ```tsx
+* // app/page.tsx (Server Component)
+* import { Suspense } from 'react'
+* import { QueriesHydration } from '@suspensive/react-query'
+* import { queryOptions } from '@tanstack/react-query'
+*
+* const userQueryOptions = (userId: string) => queryOptions({
+*   queryKey: ['user', userId],
+*   queryFn: () => fetchUser(userId)
+* })
+*
+* const postsQueryOptions = () => queryOptions({
+*   queryKey: ['posts'],
+*   queryFn: () => fetchPosts()
+* })
+*
+* export default function Page({ userId }: { userId: string }) {
+*   return (
+*     <>
+*       <Suspense fallback={<div>Loading user...</div>}>
+*         <QueriesHydration queries={[userQueryOptions(userId)]}>
+*           <UserProfile />
+*         </QueriesHydration>
+*       </Suspense>
+*
+*       <Suspense fallback={<div>Loading posts...</div>}>
+*         <QueriesHydration queries={[postsQueryOptions()]}>
+*           <PostsList />
+*         </QueriesHydration>
+*       </Suspense>
+*     </>
+*   )
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With custom error fallback
+* <Suspense fallback={<div>Loading user...</div>}>
+*   <QueriesHydration
+*     queries={[userQueryOptions(userId)]}
+*     skipSsrOnError={{ fallback: <div>Fetching on client...</div> }}
+*   >
+*     <UserProfile />
+*   </QueriesHydration>
+* </Suspense>
+* ```
+*
+* @see {@link https://suspensive.org/docs/react-query/QueriesHydration Documentation}
+*/
+function QueriesHydration(_x) {
+	return _QueriesHydration.apply(this, arguments);
+}
+function _QueriesHydration() {
+	_QueriesHydration = _asyncToGenerator(function* (_ref) {
+		let { queries, children, queryClient = new __tanstack_react_query.QueryClient(), skipSsrOnError = true, timeout } = _ref, props = require_objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
+		const timeoutController = timeout != null && timeout >= 0 ? createTimeoutController(timeout, `QueriesHydration: timeout after ${timeout} ms)`) : void 0;
+		try {
+			const queriesPromise = Promise.all(queries.map((query) => "getNextPageParam" in query ? queryClient.fetchInfiniteQuery(query) : queryClient.fetchQuery(query)));
+			yield timeoutController != null ? Promise.race([queriesPromise, timeoutController.promise]) : queriesPromise;
+			timeoutController === null || timeoutController === void 0 || timeoutController.clear();
+		} catch (_unused) {
+			timeoutController === null || timeoutController === void 0 || timeoutController.clear();
+			if (skipSsrOnError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ClientOnly.ClientOnly, {
+				fallback: skipSsrOnError === true ? void 0 : skipSsrOnError.fallback,
+				children
+			});
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tanstack_react_query.Hydrate, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props), {}, {
+			state: (0, __tanstack_react_query.dehydrate)(queryClient),
+			children
+		}));
+	});
+	return _QueriesHydration.apply(this, arguments);
+}
+const createTimeoutController = (ms, errorMessage) => {
+	let timerId;
+	return {
+		promise: new Promise((_, reject) => {
+			timerId = setTimeout(() => reject(new Error(errorMessage)), ms);
+		}),
+		clear: () => timerId != null && clearTimeout(timerId)
+	};
+};
+
+//#endregion
+Object.defineProperty(exports, 'QueriesHydration', {
+  enumerable: true,
+  get: function () {
+    return QueriesHydration;
+  }
+});
+//# sourceMappingURL=QueriesHydration-Cd2lBXvZ.cjs.map

package/dist/QueriesHydration-Cd2lBXvZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueriesHydration-Cd2lBXvZ.cjs","names":["QueryClient","ClientOnly","Hydrate","timerId: ReturnType<typeof setTimeout> | undefined"],"sources":["../src/QueriesHydration.tsx"],"sourcesContent":["import {\n  Hydrate,\n  type HydrateProps,\n  type OmitKeyof,\n  QueryClient,\n  type QueryOptions,\n  type UseInfiniteQueryOptions,\n  type WithRequired,\n  dehydrate,\n} from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { ClientOnly } from './components/ClientOnly'\n\n/**\n * A server component that fetches multiple queries on the server and hydrates them to the client.\n *\n * @experimental This component is experimental and may be changed or removed in the future.\n *\n * @description\n * QueriesHydration is designed for React Server Components (RSC).\n * It pre-fetches multiple queries on the server side and automatically hydrates\n * the data to the client, enabling seamless data synchronization between server and client.\n *\n * When errors occur during server-side fetching, the component gracefully falls back\n * to client-side rendering, ensuring your application remains resilient.\n *\n * @example\n * ```tsx\n * // app/page.tsx (Server Component)\n * import { Suspense } from 'react'\n * import { QueriesHydration } from '@suspensive/react-query'\n * import { queryOptions } from '@tanstack/react-query'\n *\n * const userQueryOptions = (userId: string) => queryOptions({\n *   queryKey: ['user', userId],\n *   queryFn: () => fetchUser(userId)\n * })\n *\n * const postsQueryOptions = () => queryOptions({\n *   queryKey: ['posts'],\n *   queryFn: () => fetchPosts()\n * })\n *\n * export default function Page({ userId }: { userId: string }) {\n *   return (\n *     <>\n *       <Suspense fallback={<div>Loading user...</div>}>\n *         <QueriesHydration queries={[userQueryOptions(userId)]}>\n *           <UserProfile />\n *         </QueriesHydration>\n *       </Suspense>\n *\n *       <Suspense fallback={<div>Loading posts...</div>}>\n *         <QueriesHydration queries={[postsQueryOptions()]}>\n *           <PostsList />\n *         </QueriesHydration>\n *       </Suspense>\n *     </>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom error fallback\n * <Suspense fallback={<div>Loading user...</div>}>\n *   <QueriesHydration\n *     queries={[userQueryOptions(userId)]}\n *     skipSsrOnError={{ fallback: <div>Fetching on client...</div> }}\n *   >\n *     <UserProfile />\n *   </QueriesHydration>\n * </Suspense>\n * ```\n *\n * @see {@link https://suspensive.org/docs/react-query/QueriesHydration Documentation}\n */\nexport async function QueriesHydration({\n  queries,\n  children,\n  queryClient = new QueryClient(),\n  skipSsrOnError = true,\n  timeout,\n  ...props\n}: {\n  /**\n   * The QueryClient instance to use for fetching queries.\n   */\n  queryClient?: QueryClient\n  /**\n   * An array of query options or infinite query options to be fetched on the server. Each query must include a `queryKey`.\n   * You can mix regular queries and infinite queries in the same array.\n   */\n  queries: (\n    | WithRequired<QueryOptions<any, any, any, any>, 'queryKey'>\n    | WithRequired<UseInfiniteQueryOptions<any, any, any, any, any>, 'queryKey'>\n  )[]\n  /**\n   * Controls error handling behavior:\n   * - `true` (default): Skips SSR and falls back to client-side rendering when server fetch fails\n   * - `false`: Proceeds with SSR without hydration (retry fetching on client component server rendering)\n   * - `{ fallback: ReactNode }`: Skips SSR with custom fallback UI during client-side rendering\n   */\n  skipSsrOnError?:\n    | boolean\n    | {\n        fallback: ReactNode\n      }\n  /**\n   * The timeout in milliseconds for the query.\n   * If the query takes longer than the timeout, it will be considered as an error.\n   * When not set, no timeout is applied.\n   */\n  timeout?: number\n} & OmitKeyof<HydrateProps, 'state'>) {\n  const timeoutController =\n    timeout != null && timeout >= 0\n      ? createTimeoutController(timeout, `QueriesHydration: timeout after ${timeout} ms)`)\n      : undefined\n  try {\n    const queriesPromise = Promise.all(\n      queries.map((query) =>\n        'getNextPageParam' in query ? queryClient.fetchInfiniteQuery(query) : queryClient.fetchQuery(query)\n      )\n    )\n    await (timeoutController != null ? Promise.race([queriesPromise, timeoutController.promise]) : queriesPromise)\n    timeoutController?.clear()\n  } catch {\n    timeoutController?.clear()\n    if (skipSsrOnError) {\n      return (\n        <ClientOnly fallback={skipSsrOnError === true ? undefined : skipSsrOnError.fallback}>{children}</ClientOnly>\n      )\n    }\n  }\n  return (\n    <Hydrate {...props} state={dehydrate(queryClient)}>\n      {children}\n    </Hydrate>\n  )\n}\n\nconst createTimeoutController = (ms: number, errorMessage: string) => {\n  let timerId: ReturnType<typeof setTimeout> | undefined\n  return {\n    promise: new Promise<never>((_, reject) => {\n      timerId = setTimeout(() => reject(new Error(errorMessage)), ms)\n    }),\n    clear: () => timerId != null && clearTimeout(timerId),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EE;CACA;CACA;CACA;CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AALF,SAAsB,iBAAiB;;;;wDAqCD;MArCC,EACrC,SACA,UACA,cAAc,IAAIA,oCAAa,EAC/B,iBAAiB,MACjB,kBACG;EAgCH,MAAM,oBACJ,WAAW,QAAQ,WAAW,IAC1B,wBAAwB,SAAS,mCAAmC,QAAQ,MAAM,GAClF;AACN,MAAI;GACF,MAAM,iBAAiB,QAAQ,IAC7B,QAAQ,KAAK,UACX,sBAAsB,QAAQ,YAAY,mBAAmB,MAAM,GAAG,YAAY,WAAW,MAAM,CACpG,CACF;AACD,SAAO,qBAAqB,OAAO,QAAQ,KAAK,CAAC,gBAAgB,kBAAkB,QAAQ,CAAC,GAAG;AAC/F,mFAAmB,OAAO;oBACpB;AACN,mFAAmB,OAAO;AAC1B,OAAI,eACF,QACE,2CAACC;IAAW,UAAU,mBAAmB,OAAO,SAAY,eAAe;IAAW;KAAsB;;AAIlH,SACE,2CAACC,8GAAY;GAAO,6CAAiB,YAAY;GAC9C;KACO;;;;AAId,MAAM,2BAA2B,IAAY,iBAAyB;CACpE,IAAIC;AACJ,QAAO;EACL,SAAS,IAAI,SAAgB,GAAG,WAAW;AACzC,aAAU,iBAAiB,OAAO,IAAI,MAAM,aAAa,CAAC,EAAE,GAAG;IAC/D;EACF,aAAa,WAAW,QAAQ,aAAa,QAAQ;EACtD"}