@suspensive/react-query-4
Version:
Suspensive interfaces for @tanstack/react-query@4
64 lines (62 loc) • 2.99 kB
JavaScript
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_objectSpread2 = require('./_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.cjs');
let _tanstack_react_query = require("@tanstack/react-query");
//#region src/createGetQueryClient.ts
/**
* Creates a function that returns a QueryClient instance, with different behavior for server and client environments.
*
* On the server, it always creates a new QueryClient instance with `cacheTime: Infinity` to prevent data from being garbage collected.
* On the client, it reuses the same QueryClient instance to avoid recreating it during React's initial render suspension.
*
* @experimental This component is experimental and may be changed or removed in the future.
*
* @param config - Optional QueryClient configuration. On the server, `cacheTime` will be automatically set to `Infinity`.
* @returns An object containing a `getQueryClient` function that returns a QueryClient instance.
*
* @example
* ```tsx
* // Create a get-query-client.ts file in your project:
* // get-query-client.ts
* import { createGetQueryClient } from '@suspensive/react-query'
*
* export const { getQueryClient } = createGetQueryClient()
*
* @example
* ```tsx
* // Then import and use it in your code:
* // app/providers.tsx
* 'use client'
*
* import { QueryClientProvider } from '@tanstack/react-query'
* import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
* import { getQueryClient } from '@/app/get-query-client'
* import type * as React from 'react'
*
* export default function Providers({ children }: { children: React.ReactNode }) {
* const queryClient = getQueryClient()
*
* return (
* <QueryClientProvider client={queryClient}>
* {children}
* <ReactQueryDevtools />
* </QueryClientProvider>
* )
* }
* ```
*
* @see {@link https://suspensive.org/docs/react-query/createGetQueryClient Suspensive Docs}
*/
function createGetQueryClient(config = {}) {
var _config$defaultOption;
let browserQueryClient;
const getQueryClientConfig = _tanstack_react_query.isServer ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, config), {}, { defaultOptions: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, config.defaultOptions), {}, { queries: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_config$defaultOption = config.defaultOptions) === null || _config$defaultOption === void 0 ? void 0 : _config$defaultOption.queries), {}, { cacheTime: Infinity }) }) }) : config;
function getQueryClient() {
if (_tanstack_react_query.isServer) return new _tanstack_react_query.QueryClient(getQueryClientConfig);
if (!browserQueryClient) browserQueryClient = new _tanstack_react_query.QueryClient(getQueryClientConfig);
return browserQueryClient;
}
return { getQueryClient };
}
//#endregion
exports.createGetQueryClient = createGetQueryClient;
//# sourceMappingURL=createGetQueryClient.cjs.map