@suspensive/react-query-4/dist/QueriesHydration.cjs

Suspensive interfaces for @tanstack/react-query@4

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_objectWithoutProperties = require('./_virtual/_@oxc-project_runtime@0.130.0/helpers/objectWithoutProperties.cjs');
const require_ClientOnly = require('./components/ClientOnly.cjs');
const require_objectSpread2 = require('./_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.cjs');
const require_asyncToGenerator = require('./_virtual/_@oxc-project_runtime@0.130.0/helpers/asyncToGenerator.cjs');
let _tanstack_react_query = require("@tanstack/react-query");
let react_jsx_runtime = require("react/jsx-runtime");

//#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 = require_asyncToGenerator._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) : 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();
			queries.forEach((query) => void queryClient.cancelQueries(query));
			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) => {
	let timerId;
	return {
		promise: new Promise((_, reject) => {
			timerId = setTimeout(() => reject(/* @__PURE__ */ new Error(`QueriesHydration: timeout after ${ms} ms`)), ms);
		}),
		clear: () => timerId != null && clearTimeout(timerId)
	};
};

//#endregion
exports.QueriesHydration = QueriesHydration;
//# sourceMappingURL=QueriesHydration.cjs.map