@tanstack/preact-query 5.102.3 → 5.102.5
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 +43 -0
- package/build/legacy/HydrationBoundary.cjs.map +1 -1
- package/build/legacy/HydrationBoundary.d.cts +61 -0
- package/build/legacy/HydrationBoundary.d.cts.map +1 -1
- package/build/legacy/HydrationBoundary.d.ts +61 -0
- package/build/legacy/HydrationBoundary.d.ts.map +1 -1
- package/build/legacy/HydrationBoundary.js +43 -0
- package/build/legacy/HydrationBoundary.js.map +1 -1
- package/build/legacy/IsRestoringProvider.cjs +11 -0
- package/build/legacy/IsRestoringProvider.cjs.map +1 -1
- package/build/legacy/IsRestoringProvider.d.cts +11 -0
- package/build/legacy/IsRestoringProvider.d.cts.map +1 -1
- package/build/legacy/IsRestoringProvider.d.ts +11 -0
- package/build/legacy/IsRestoringProvider.d.ts.map +1 -1
- package/build/legacy/IsRestoringProvider.js +11 -0
- package/build/legacy/IsRestoringProvider.js.map +1 -1
- package/build/legacy/QueryClientProvider.cjs +30 -0
- package/build/legacy/QueryClientProvider.cjs.map +1 -1
- package/build/legacy/QueryClientProvider.d.cts +41 -0
- package/build/legacy/QueryClientProvider.d.cts.map +1 -1
- package/build/legacy/QueryClientProvider.d.ts +41 -0
- package/build/legacy/QueryClientProvider.d.ts.map +1 -1
- package/build/legacy/QueryClientProvider.js +30 -0
- package/build/legacy/QueryClientProvider.js.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.cjs +77 -0
- package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.cts +108 -0
- package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.ts +108 -0
- package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.js +77 -0
- package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
- package/build/legacy/infiniteQueryOptions.cjs.map +1 -1
- package/build/legacy/infiniteQueryOptions.d.cts +187 -0
- package/build/legacy/infiniteQueryOptions.d.cts.map +1 -1
- package/build/legacy/infiniteQueryOptions.d.ts +187 -0
- package/build/legacy/infiniteQueryOptions.d.ts.map +1 -1
- package/build/legacy/infiniteQueryOptions.js.map +1 -1
- package/build/legacy/mutationOptions.cjs.map +1 -1
- package/build/legacy/mutationOptions.d.cts +68 -0
- package/build/legacy/mutationOptions.d.cts.map +1 -1
- package/build/legacy/mutationOptions.d.ts +68 -0
- package/build/legacy/mutationOptions.d.ts.map +1 -1
- package/build/legacy/mutationOptions.js.map +1 -1
- package/build/legacy/queryOptions.cjs.map +1 -1
- package/build/legacy/queryOptions.d.cts +198 -0
- package/build/legacy/queryOptions.d.cts.map +1 -1
- package/build/legacy/queryOptions.d.ts +198 -0
- package/build/legacy/queryOptions.d.ts.map +1 -1
- package/build/legacy/queryOptions.js.map +1 -1
- package/build/legacy/types.cjs.map +1 -1
- package/build/legacy/types.d.cts +228 -2
- package/build/legacy/types.d.cts.map +1 -1
- package/build/legacy/types.d.ts +228 -2
- package/build/legacy/types.d.ts.map +1 -1
- package/build/legacy/types.js.map +1 -1
- package/build/legacy/useInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useInfiniteQuery.d.cts +120 -0
- package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useInfiniteQuery.d.ts +120 -0
- package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useInfiniteQuery.js.map +1 -1
- package/build/legacy/useIsFetching.cjs +34 -0
- package/build/legacy/useIsFetching.cjs.map +1 -1
- package/build/legacy/useIsFetching.d.cts +34 -0
- package/build/legacy/useIsFetching.d.cts.map +1 -1
- package/build/legacy/useIsFetching.d.ts +34 -0
- package/build/legacy/useIsFetching.d.ts.map +1 -1
- package/build/legacy/useIsFetching.js +34 -0
- package/build/legacy/useIsFetching.js.map +1 -1
- package/build/legacy/useMutation.cjs +170 -0
- package/build/legacy/useMutation.cjs.map +1 -1
- package/build/legacy/useMutation.d.cts +170 -0
- package/build/legacy/useMutation.d.cts.map +1 -1
- package/build/legacy/useMutation.d.ts +170 -0
- package/build/legacy/useMutation.d.ts.map +1 -1
- package/build/legacy/useMutation.js +170 -0
- package/build/legacy/useMutation.js.map +1 -1
- package/build/legacy/useMutationState.cjs +74 -0
- package/build/legacy/useMutationState.cjs.map +1 -1
- package/build/legacy/useMutationState.d.cts +74 -0
- package/build/legacy/useMutationState.d.cts.map +1 -1
- package/build/legacy/useMutationState.d.ts +74 -0
- package/build/legacy/useMutationState.d.ts.map +1 -1
- package/build/legacy/useMutationState.js +74 -0
- package/build/legacy/useMutationState.js.map +1 -1
- package/build/legacy/usePrefetchInfiniteQuery.cjs +44 -0
- package/build/legacy/usePrefetchInfiniteQuery.cjs.map +1 -1
- package/build/legacy/usePrefetchInfiniteQuery.d.cts +44 -0
- package/build/legacy/usePrefetchInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/usePrefetchInfiniteQuery.d.ts +44 -0
- package/build/legacy/usePrefetchInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/usePrefetchInfiniteQuery.js +44 -0
- package/build/legacy/usePrefetchInfiniteQuery.js.map +1 -1
- package/build/legacy/usePrefetchQuery.cjs +35 -0
- package/build/legacy/usePrefetchQuery.cjs.map +1 -1
- package/build/legacy/usePrefetchQuery.d.cts +35 -0
- package/build/legacy/usePrefetchQuery.d.cts.map +1 -1
- package/build/legacy/usePrefetchQuery.d.ts +35 -0
- package/build/legacy/usePrefetchQuery.d.ts.map +1 -1
- package/build/legacy/usePrefetchQuery.js +35 -0
- package/build/legacy/usePrefetchQuery.js.map +1 -1
- package/build/legacy/useQueries.cjs +50 -0
- package/build/legacy/useQueries.cjs.map +1 -1
- package/build/legacy/useQueries.d.cts +85 -2
- package/build/legacy/useQueries.d.cts.map +1 -1
- package/build/legacy/useQueries.d.ts +85 -2
- package/build/legacy/useQueries.d.ts.map +1 -1
- package/build/legacy/useQueries.js +50 -0
- package/build/legacy/useQueries.js.map +1 -1
- package/build/legacy/useQuery.cjs.map +1 -1
- package/build/legacy/useQuery.d.cts +186 -0
- package/build/legacy/useQuery.d.cts.map +1 -1
- package/build/legacy/useQuery.d.ts +186 -0
- package/build/legacy/useQuery.d.ts.map +1 -1
- package/build/legacy/useQuery.js.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.cjs +56 -0
- package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.cts +56 -0
- package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.ts +56 -0
- package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.js +56 -0
- package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/legacy/useSuspenseQueries.cjs.map +1 -1
- package/build/legacy/useSuspenseQueries.d.cts +196 -2
- package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
- package/build/legacy/useSuspenseQueries.d.ts +196 -2
- package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
- package/build/legacy/useSuspenseQueries.js.map +1 -1
- package/build/legacy/useSuspenseQuery.cjs +47 -0
- package/build/legacy/useSuspenseQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseQuery.d.cts +47 -0
- package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseQuery.d.ts +47 -0
- package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseQuery.js +47 -0
- package/build/legacy/useSuspenseQuery.js.map +1 -1
- package/build/modern/HydrationBoundary.cjs +43 -0
- package/build/modern/HydrationBoundary.cjs.map +1 -1
- package/build/modern/HydrationBoundary.d.cts +61 -0
- package/build/modern/HydrationBoundary.d.cts.map +1 -1
- package/build/modern/HydrationBoundary.d.ts +61 -0
- package/build/modern/HydrationBoundary.d.ts.map +1 -1
- package/build/modern/HydrationBoundary.js +43 -0
- package/build/modern/HydrationBoundary.js.map +1 -1
- package/build/modern/IsRestoringProvider.cjs +11 -0
- package/build/modern/IsRestoringProvider.cjs.map +1 -1
- package/build/modern/IsRestoringProvider.d.cts +11 -0
- package/build/modern/IsRestoringProvider.d.cts.map +1 -1
- package/build/modern/IsRestoringProvider.d.ts +11 -0
- package/build/modern/IsRestoringProvider.d.ts.map +1 -1
- package/build/modern/IsRestoringProvider.js +11 -0
- package/build/modern/IsRestoringProvider.js.map +1 -1
- package/build/modern/QueryClientProvider.cjs +30 -0
- package/build/modern/QueryClientProvider.cjs.map +1 -1
- package/build/modern/QueryClientProvider.d.cts +41 -0
- package/build/modern/QueryClientProvider.d.cts.map +1 -1
- package/build/modern/QueryClientProvider.d.ts +41 -0
- package/build/modern/QueryClientProvider.d.ts.map +1 -1
- package/build/modern/QueryClientProvider.js +30 -0
- package/build/modern/QueryClientProvider.js.map +1 -1
- package/build/modern/QueryErrorResetBoundary.cjs +77 -0
- package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.cts +108 -0
- package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.ts +108 -0
- package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.js +77 -0
- package/build/modern/QueryErrorResetBoundary.js.map +1 -1
- package/build/modern/infiniteQueryOptions.cjs.map +1 -1
- package/build/modern/infiniteQueryOptions.d.cts +187 -0
- package/build/modern/infiniteQueryOptions.d.cts.map +1 -1
- package/build/modern/infiniteQueryOptions.d.ts +187 -0
- package/build/modern/infiniteQueryOptions.d.ts.map +1 -1
- package/build/modern/infiniteQueryOptions.js.map +1 -1
- package/build/modern/mutationOptions.cjs.map +1 -1
- package/build/modern/mutationOptions.d.cts +68 -0
- package/build/modern/mutationOptions.d.cts.map +1 -1
- package/build/modern/mutationOptions.d.ts +68 -0
- package/build/modern/mutationOptions.d.ts.map +1 -1
- package/build/modern/mutationOptions.js.map +1 -1
- package/build/modern/queryOptions.cjs.map +1 -1
- package/build/modern/queryOptions.d.cts +198 -0
- package/build/modern/queryOptions.d.cts.map +1 -1
- package/build/modern/queryOptions.d.ts +198 -0
- package/build/modern/queryOptions.d.ts.map +1 -1
- package/build/modern/queryOptions.js.map +1 -1
- package/build/modern/types.cjs.map +1 -1
- package/build/modern/types.d.cts +228 -2
- package/build/modern/types.d.cts.map +1 -1
- package/build/modern/types.d.ts +228 -2
- package/build/modern/types.d.ts.map +1 -1
- package/build/modern/types.js.map +1 -1
- package/build/modern/useInfiniteQuery.cjs.map +1 -1
- package/build/modern/useInfiniteQuery.d.cts +120 -0
- package/build/modern/useInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useInfiniteQuery.d.ts +120 -0
- package/build/modern/useInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useInfiniteQuery.js.map +1 -1
- package/build/modern/useIsFetching.cjs +34 -0
- package/build/modern/useIsFetching.cjs.map +1 -1
- package/build/modern/useIsFetching.d.cts +34 -0
- package/build/modern/useIsFetching.d.cts.map +1 -1
- package/build/modern/useIsFetching.d.ts +34 -0
- package/build/modern/useIsFetching.d.ts.map +1 -1
- package/build/modern/useIsFetching.js +34 -0
- package/build/modern/useIsFetching.js.map +1 -1
- package/build/modern/useMutation.cjs +170 -0
- package/build/modern/useMutation.cjs.map +1 -1
- package/build/modern/useMutation.d.cts +170 -0
- package/build/modern/useMutation.d.cts.map +1 -1
- package/build/modern/useMutation.d.ts +170 -0
- package/build/modern/useMutation.d.ts.map +1 -1
- package/build/modern/useMutation.js +170 -0
- package/build/modern/useMutation.js.map +1 -1
- package/build/modern/useMutationState.cjs +74 -0
- package/build/modern/useMutationState.cjs.map +1 -1
- package/build/modern/useMutationState.d.cts +74 -0
- package/build/modern/useMutationState.d.cts.map +1 -1
- package/build/modern/useMutationState.d.ts +74 -0
- package/build/modern/useMutationState.d.ts.map +1 -1
- package/build/modern/useMutationState.js +74 -0
- package/build/modern/useMutationState.js.map +1 -1
- package/build/modern/usePrefetchInfiniteQuery.cjs +44 -0
- package/build/modern/usePrefetchInfiniteQuery.cjs.map +1 -1
- package/build/modern/usePrefetchInfiniteQuery.d.cts +44 -0
- package/build/modern/usePrefetchInfiniteQuery.d.cts.map +1 -1
- package/build/modern/usePrefetchInfiniteQuery.d.ts +44 -0
- package/build/modern/usePrefetchInfiniteQuery.d.ts.map +1 -1
- package/build/modern/usePrefetchInfiniteQuery.js +44 -0
- package/build/modern/usePrefetchInfiniteQuery.js.map +1 -1
- package/build/modern/usePrefetchQuery.cjs +35 -0
- package/build/modern/usePrefetchQuery.cjs.map +1 -1
- package/build/modern/usePrefetchQuery.d.cts +35 -0
- package/build/modern/usePrefetchQuery.d.cts.map +1 -1
- package/build/modern/usePrefetchQuery.d.ts +35 -0
- package/build/modern/usePrefetchQuery.d.ts.map +1 -1
- package/build/modern/usePrefetchQuery.js +35 -0
- package/build/modern/usePrefetchQuery.js.map +1 -1
- package/build/modern/useQueries.cjs +50 -0
- package/build/modern/useQueries.cjs.map +1 -1
- package/build/modern/useQueries.d.cts +85 -2
- package/build/modern/useQueries.d.cts.map +1 -1
- package/build/modern/useQueries.d.ts +85 -2
- package/build/modern/useQueries.d.ts.map +1 -1
- package/build/modern/useQueries.js +50 -0
- package/build/modern/useQueries.js.map +1 -1
- package/build/modern/useQuery.cjs.map +1 -1
- package/build/modern/useQuery.d.cts +186 -0
- package/build/modern/useQuery.d.cts.map +1 -1
- package/build/modern/useQuery.d.ts +186 -0
- package/build/modern/useQuery.d.ts.map +1 -1
- package/build/modern/useQuery.js.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.cjs +56 -0
- package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.cts +56 -0
- package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.ts +56 -0
- package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.js +56 -0
- package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/modern/useSuspenseQueries.cjs.map +1 -1
- package/build/modern/useSuspenseQueries.d.cts +196 -2
- package/build/modern/useSuspenseQueries.d.cts.map +1 -1
- package/build/modern/useSuspenseQueries.d.ts +196 -2
- package/build/modern/useSuspenseQueries.d.ts.map +1 -1
- package/build/modern/useSuspenseQueries.js.map +1 -1
- package/build/modern/useSuspenseQuery.cjs +47 -0
- package/build/modern/useSuspenseQuery.cjs.map +1 -1
- package/build/modern/useSuspenseQuery.d.cts +47 -0
- package/build/modern/useSuspenseQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseQuery.d.ts +47 -0
- package/build/modern/useSuspenseQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseQuery.js +47 -0
- package/build/modern/useSuspenseQuery.js.map +1 -1
- package/package.json +3 -3
- package/src/HydrationBoundary.tsx +61 -0
- package/src/IsRestoringProvider.ts +12 -0
- package/src/QueryClientProvider.tsx +41 -0
- package/src/QueryErrorResetBoundary.tsx +111 -0
- package/src/infiniteQueryOptions.ts +187 -0
- package/src/mutationOptions.ts +68 -0
- package/src/queryOptions.ts +198 -0
- package/src/types.ts +228 -2
- package/src/useInfiniteQuery.ts +120 -0
- package/src/useIsFetching.ts +34 -0
- package/src/useMutation.ts +170 -0
- package/src/useMutationState.ts +74 -0
- package/src/usePrefetchInfiniteQuery.tsx +44 -0
- package/src/usePrefetchQuery.tsx +35 -0
- package/src/useQueries.ts +85 -2
- package/src/useQuery.ts +186 -0
- package/src/useSuspenseInfiniteQuery.ts +56 -0
- package/src/useSuspenseQueries.ts +196 -2
- package/src/useSuspenseQuery.ts +47 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseQueries.js","names":[],"sources":["../../src/useSuspenseQueries.ts"],"sourcesContent":["import { skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n QueryClient,\n QueryFunction,\n ThrowOnError,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useQueries } from './useQueries'\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetUseSuspenseQueryOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryOptions<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryOptions<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TQueryFnData,\n TQueryKey\n >\n : // Fallback\n UseSuspenseQueryOptions\n\ntype GetUseSuspenseQueryResult<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? UseSuspenseQueryResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? UseSuspenseQueryResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n UseSuspenseQueryResult\n\n/**\n * SuspenseQueriesOptions reducer recursively unwraps function arguments to infer/enforce type param\n */\nexport type SuspenseQueriesOptions<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryOptions>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryOptions<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesOptions<\n [...Tails],\n [...TResults, GetUseSuspenseQueryOptions<Head>],\n [...TDepth, 1]\n >\n : Array<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n UseSuspenseQueryOptions<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>\n >\n : // Fallback\n Array<UseSuspenseQueryOptions>\n\n/**\n * SuspenseQueriesResults reducer recursively maps type param to results\n */\nexport type SuspenseQueriesResults<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryResult<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesResults<\n [...Tails],\n [...TResults, GetUseSuspenseQueryResult<Head>],\n [...TDepth, 1]\n >\n : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }\n\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n queries:\n | readonly [...SuspenseQueriesOptions<T>]\n | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n queries: readonly [...SuspenseQueriesOptions<T>]\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries(options: any, queryClient?: QueryClient) {\n return useQueries(\n {\n ...options,\n queries: options.queries.map((query: any) => {\n if (process.env.NODE_ENV !== 'production') {\n if (query.queryFn === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQueries')\n }\n }\n\n return {\n ...query,\n suspense: true,\n throwOnError: defaultThrowOnError,\n enabled: true,\n placeholderData: undefined,\n }\n }),\n },\n queryClient,\n )\n}\n"],"mappings":";;;;AA4LA,SAAgB,mBAAmB,SAAc,aAA2B;CAC1E,OAAO,WACL;EACE,GAAG;EACH,SAAS,QAAQ,QAAQ,KAAK,UAAe;GAC3C,IAAI,QAAQ,IAAI,aAAa,cACvB;QAAA,MAAM,YAAY,WACpB,QAAQ,MAAM,iDAAiD;GAAA;GAInE,OAAO;IACL,GAAG;IACH,UAAU;IACV,cAAc;IACd,SAAS;IACT,iBAAiB,KAAA;GACnB;EACF,CAAC;CACH,GACA,WACF;AACF"}
|
|
1
|
+
{"version":3,"file":"useSuspenseQueries.js","names":[],"sources":["../../src/useSuspenseQueries.ts"],"sourcesContent":["import { skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n QueryClient,\n QueryFunction,\n ThrowOnError,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useQueries } from './useQueries'\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetUseSuspenseQueryOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryOptions<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryOptions<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TQueryFnData,\n TQueryKey\n >\n : // Fallback\n UseSuspenseQueryOptions\n\ntype GetUseSuspenseQueryResult<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? UseSuspenseQueryResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? UseSuspenseQueryResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n UseSuspenseQueryResult\n\n/**\n * The `queries` array accepted by `useSuspenseQueries`. Recursively unwraps each tuple element so every\n * entry's `queryFn`/`select` are inferred individually, up to 20 elements. An opaque array (e.g. `unknown[]`)\n * is returned as-is; a non-tuple array of a known element type, or a tuple past 20 elements, falls back to a\n * single homogeneous {@link UseSuspenseQueryOptions} type.\n *\n * @template T - The type of the `queries` array as written at the call site.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesOptions<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryOptions>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryOptions<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesOptions<\n [...Tails],\n [...TResults, GetUseSuspenseQueryOptions<Head>],\n [...TDepth, 1]\n >\n : Array<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n UseSuspenseQueryOptions<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>\n >\n : // Fallback\n Array<UseSuspenseQueryOptions>\n\n/**\n * The result type returned by `useSuspenseQueries`, when no `combine` is provided. Mirrors\n * {@link SuspenseQueriesOptions}: each tuple element's result type is inferred individually, up to 20 elements.\n * A non-tuple array is mapped per-element instead, still inferring each entry individually; only past 20\n * elements does this fall back to a single homogeneous {@link UseSuspenseQueryResult} type.\n *\n * @template T - The type of the `queries` array, as inferred by {@link SuspenseQueriesOptions}.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesResults<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryResult<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesResults<\n [...Tails],\n [...TResults, GetUseSuspenseQueryResult<Head>],\n [...TDepth, 1]\n >\n : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries:\n | readonly [...SuspenseQueriesOptions<T>]\n | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries: readonly [...SuspenseQueriesOptions<T>]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries(options: any, queryClient?: QueryClient) {\n return useQueries(\n {\n ...options,\n queries: options.queries.map((query: any) => {\n if (process.env.NODE_ENV !== 'production') {\n if (query.queryFn === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQueries')\n }\n }\n\n return {\n ...query,\n suspense: true,\n throwOnError: defaultThrowOnError,\n enabled: true,\n placeholderData: undefined,\n }\n }),\n },\n queryClient,\n )\n}\n"],"mappings":";;;;AA8XA,SAAgB,mBAAmB,SAAc,aAA2B;CAC1E,OAAO,WACL;EACE,GAAG;EACH,SAAS,QAAQ,QAAQ,KAAK,UAAe;GAC3C,IAAI,QAAQ,IAAI,aAAa,cACvB;QAAA,MAAM,YAAY,WACpB,QAAQ,MAAM,iDAAiD;GAAA;GAInE,OAAO;IACL,GAAG;IACH,UAAU;IACV,cAAc;IACd,SAAS;IACT,iBAAiB,KAAA;GACnB;EACF,CAAC;CACH,GACA,WACF;AACF"}
|
|
@@ -3,6 +3,53 @@ const require_suspense = require("./suspense.cjs");
|
|
|
3
3
|
const require_useBaseQuery = require("./useBaseQuery.cjs");
|
|
4
4
|
let _tanstack_query_core = require("@tanstack/query-core");
|
|
5
5
|
//#region src/useSuspenseQuery.ts
|
|
6
|
+
/**
|
|
7
|
+
* The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and
|
|
8
|
+
* `placeholderData`.
|
|
9
|
+
*
|
|
10
|
+
* Caveat: cancellation does not work.
|
|
11
|
+
*
|
|
12
|
+
* @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request
|
|
13
|
+
* waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.
|
|
14
|
+
* Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they
|
|
15
|
+
* fetch in parallel.
|
|
16
|
+
* @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.
|
|
17
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
18
|
+
* be used.
|
|
19
|
+
* @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`
|
|
20
|
+
* is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* import { Suspense } from 'preact/compat'
|
|
25
|
+
* import { useSuspenseQuery } from '@tanstack/preact-query'
|
|
26
|
+
*
|
|
27
|
+
* function Posts() {
|
|
28
|
+
* // `data` is guaranteed to be defined here — no `isPending` check needed.
|
|
29
|
+
* const { data, isFetching } = useSuspenseQuery({
|
|
30
|
+
* queryKey: ['posts'],
|
|
31
|
+
* queryFn: fetchPosts,
|
|
32
|
+
* })
|
|
33
|
+
*
|
|
34
|
+
* return (
|
|
35
|
+
* <div>
|
|
36
|
+
* <h1>Posts {isFetching ? <Spinner /> : null}</h1>
|
|
37
|
+
* {data.map((post) => (
|
|
38
|
+
* <p key={post.id}>{post.title}</p>
|
|
39
|
+
* ))}
|
|
40
|
+
* </div>
|
|
41
|
+
* )
|
|
42
|
+
* }
|
|
43
|
+
*
|
|
44
|
+
* function App() {
|
|
45
|
+
* return (
|
|
46
|
+
* <Suspense fallback={<h1>Loading posts...</h1>}>
|
|
47
|
+
* <Posts />
|
|
48
|
+
* </Suspense>
|
|
49
|
+
* )
|
|
50
|
+
* }
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
6
53
|
function useSuspenseQuery(options, queryClient) {
|
|
7
54
|
if (process.env.NODE_ENV !== "production") {
|
|
8
55
|
if (options.queryFn === _tanstack_query_core.skipToken) console.error("skipToken is not allowed for useSuspenseQuery");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","QueryObserver"],"sources":["../../src/useSuspenseQuery.ts"],"sourcesContent":["import { QueryObserver, skipToken } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\nexport function useSuspenseQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseSuspenseQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n QueryObserver,\n queryClient,\n ) as UseSuspenseQueryResult<TData, TError>\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useSuspenseQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","QueryObserver"],"sources":["../../src/useSuspenseQuery.ts"],"sourcesContent":["import { QueryObserver, skipToken } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and\n * `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request\n * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.\n * Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they\n * fetch in parallel.\n * @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`\n * is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, isFetching } = useSuspenseQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * return (\n * <div>\n * <h1>Posts {isFetching ? <Spinner /> : null}</h1>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseSuspenseQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n QueryObserver,\n queryClient,\n ) as UseSuspenseQueryResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,iBAMd,SACA,aACuC;CACvC,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,+CAA+C;CAAA;CAIjE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,eACA,WACF;AACF"}
|
|
@@ -1,6 +1,53 @@
|
|
|
1
1
|
import { UseSuspenseQueryOptions, UseSuspenseQueryResult } from "./types.cjs";
|
|
2
2
|
import { DefaultError, QueryClient, QueryKey } from "@tanstack/query-core";
|
|
3
3
|
//#region src/useSuspenseQuery.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and
|
|
6
|
+
* `placeholderData`.
|
|
7
|
+
*
|
|
8
|
+
* Caveat: cancellation does not work.
|
|
9
|
+
*
|
|
10
|
+
* @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request
|
|
11
|
+
* waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.
|
|
12
|
+
* Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they
|
|
13
|
+
* fetch in parallel.
|
|
14
|
+
* @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.
|
|
15
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
16
|
+
* be used.
|
|
17
|
+
* @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`
|
|
18
|
+
* is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* import { Suspense } from 'preact/compat'
|
|
23
|
+
* import { useSuspenseQuery } from '@tanstack/preact-query'
|
|
24
|
+
*
|
|
25
|
+
* function Posts() {
|
|
26
|
+
* // `data` is guaranteed to be defined here — no `isPending` check needed.
|
|
27
|
+
* const { data, isFetching } = useSuspenseQuery({
|
|
28
|
+
* queryKey: ['posts'],
|
|
29
|
+
* queryFn: fetchPosts,
|
|
30
|
+
* })
|
|
31
|
+
*
|
|
32
|
+
* return (
|
|
33
|
+
* <div>
|
|
34
|
+
* <h1>Posts {isFetching ? <Spinner /> : null}</h1>
|
|
35
|
+
* {data.map((post) => (
|
|
36
|
+
* <p key={post.id}>{post.title}</p>
|
|
37
|
+
* ))}
|
|
38
|
+
* </div>
|
|
39
|
+
* )
|
|
40
|
+
* }
|
|
41
|
+
*
|
|
42
|
+
* function App() {
|
|
43
|
+
* return (
|
|
44
|
+
* <Suspense fallback={<h1>Loading posts...</h1>}>
|
|
45
|
+
* <Posts />
|
|
46
|
+
* </Suspense>
|
|
47
|
+
* )
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
4
51
|
declare function useSuspenseQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseSuspenseQueryResult<TData, TError>;
|
|
5
52
|
//#endregion
|
|
6
53
|
export { useSuspenseQuery };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseQuery.d.cts","names":[],"sources":["../../src/useSuspenseQuery.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useSuspenseQuery.d.cts","names":[],"sources":["../../src/useSuspenseQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsDgB,iBACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,wBAAwB,cAAc,QAAQ,OAAO,YAC9D,cAAc,cACb,uBAAuB,OAAO"}
|
|
@@ -1,6 +1,53 @@
|
|
|
1
1
|
import { UseSuspenseQueryOptions, UseSuspenseQueryResult } from "./types.js";
|
|
2
2
|
import { DefaultError, QueryClient, QueryKey } from "@tanstack/query-core";
|
|
3
3
|
//#region src/useSuspenseQuery.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and
|
|
6
|
+
* `placeholderData`.
|
|
7
|
+
*
|
|
8
|
+
* Caveat: cancellation does not work.
|
|
9
|
+
*
|
|
10
|
+
* @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request
|
|
11
|
+
* waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.
|
|
12
|
+
* Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they
|
|
13
|
+
* fetch in parallel.
|
|
14
|
+
* @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.
|
|
15
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
16
|
+
* be used.
|
|
17
|
+
* @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`
|
|
18
|
+
* is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* import { Suspense } from 'preact/compat'
|
|
23
|
+
* import { useSuspenseQuery } from '@tanstack/preact-query'
|
|
24
|
+
*
|
|
25
|
+
* function Posts() {
|
|
26
|
+
* // `data` is guaranteed to be defined here — no `isPending` check needed.
|
|
27
|
+
* const { data, isFetching } = useSuspenseQuery({
|
|
28
|
+
* queryKey: ['posts'],
|
|
29
|
+
* queryFn: fetchPosts,
|
|
30
|
+
* })
|
|
31
|
+
*
|
|
32
|
+
* return (
|
|
33
|
+
* <div>
|
|
34
|
+
* <h1>Posts {isFetching ? <Spinner /> : null}</h1>
|
|
35
|
+
* {data.map((post) => (
|
|
36
|
+
* <p key={post.id}>{post.title}</p>
|
|
37
|
+
* ))}
|
|
38
|
+
* </div>
|
|
39
|
+
* )
|
|
40
|
+
* }
|
|
41
|
+
*
|
|
42
|
+
* function App() {
|
|
43
|
+
* return (
|
|
44
|
+
* <Suspense fallback={<h1>Loading posts...</h1>}>
|
|
45
|
+
* <Posts />
|
|
46
|
+
* </Suspense>
|
|
47
|
+
* )
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
4
51
|
declare function useSuspenseQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseSuspenseQueryResult<TData, TError>;
|
|
5
52
|
//#endregion
|
|
6
53
|
export { useSuspenseQuery };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseQuery.d.ts","names":[],"sources":["../../src/useSuspenseQuery.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useSuspenseQuery.d.ts","names":[],"sources":["../../src/useSuspenseQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsDgB,iBACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,wBAAwB,cAAc,QAAQ,OAAO,YAC9D,cAAc,cACb,uBAAuB,OAAO"}
|
|
@@ -2,6 +2,53 @@ import { defaultThrowOnError } from "./suspense.js";
|
|
|
2
2
|
import { useBaseQuery } from "./useBaseQuery.js";
|
|
3
3
|
import { QueryObserver, skipToken } from "@tanstack/query-core";
|
|
4
4
|
//#region src/useSuspenseQuery.ts
|
|
5
|
+
/**
|
|
6
|
+
* The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and
|
|
7
|
+
* `placeholderData`.
|
|
8
|
+
*
|
|
9
|
+
* Caveat: cancellation does not work.
|
|
10
|
+
*
|
|
11
|
+
* @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request
|
|
12
|
+
* waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.
|
|
13
|
+
* Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they
|
|
14
|
+
* fetch in parallel.
|
|
15
|
+
* @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.
|
|
16
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
17
|
+
* be used.
|
|
18
|
+
* @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`
|
|
19
|
+
* is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import { Suspense } from 'preact/compat'
|
|
24
|
+
* import { useSuspenseQuery } from '@tanstack/preact-query'
|
|
25
|
+
*
|
|
26
|
+
* function Posts() {
|
|
27
|
+
* // `data` is guaranteed to be defined here — no `isPending` check needed.
|
|
28
|
+
* const { data, isFetching } = useSuspenseQuery({
|
|
29
|
+
* queryKey: ['posts'],
|
|
30
|
+
* queryFn: fetchPosts,
|
|
31
|
+
* })
|
|
32
|
+
*
|
|
33
|
+
* return (
|
|
34
|
+
* <div>
|
|
35
|
+
* <h1>Posts {isFetching ? <Spinner /> : null}</h1>
|
|
36
|
+
* {data.map((post) => (
|
|
37
|
+
* <p key={post.id}>{post.title}</p>
|
|
38
|
+
* ))}
|
|
39
|
+
* </div>
|
|
40
|
+
* )
|
|
41
|
+
* }
|
|
42
|
+
*
|
|
43
|
+
* function App() {
|
|
44
|
+
* return (
|
|
45
|
+
* <Suspense fallback={<h1>Loading posts...</h1>}>
|
|
46
|
+
* <Posts />
|
|
47
|
+
* </Suspense>
|
|
48
|
+
* )
|
|
49
|
+
* }
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
5
52
|
function useSuspenseQuery(options, queryClient) {
|
|
6
53
|
if (process.env.NODE_ENV !== "production") {
|
|
7
54
|
if (options.queryFn === skipToken) console.error("skipToken is not allowed for useSuspenseQuery");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseQuery.js","names":[],"sources":["../../src/useSuspenseQuery.ts"],"sourcesContent":["import { QueryObserver, skipToken } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\nexport function useSuspenseQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseSuspenseQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n QueryObserver,\n queryClient,\n ) as UseSuspenseQueryResult<TData, TError>\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useSuspenseQuery.js","names":[],"sources":["../../src/useSuspenseQuery.ts"],"sourcesContent":["import { QueryObserver, skipToken } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and\n * `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request\n * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.\n * Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they\n * fetch in parallel.\n * @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`\n * is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, isFetching } = useSuspenseQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * return (\n * <div>\n * <h1>Posts {isFetching ? <Spinner /> : null}</h1>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseSuspenseQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n QueryObserver,\n queryClient,\n ) as UseSuspenseQueryResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,iBAMd,SACA,aACuC;CACvC,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoB,WAC/B,QAAQ,MAAM,+CAA+C;CAAA;CAIjE,OAAO,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAc;EACd,iBAAiB,KAAA;CACnB,GACA,eACA,WACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/preact-query",
|
|
3
|
-
"version": "5.102.
|
|
3
|
+
"version": "5.102.5",
|
|
4
4
|
"description": "Hooks for managing, caching and syncing asynchronous and remote data in preact",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"!build/codemods/**/__tests__"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@tanstack/query-core": "5.102.
|
|
46
|
+
"@tanstack/query-core": "5.102.5"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@preact/preset-vite": "^2.10.2",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"preact-render-to-string": "^6.6.4",
|
|
56
56
|
"typescript": "6.0.3",
|
|
57
57
|
"typescript-eslint": "^8.54.0",
|
|
58
|
-
"@tanstack/query-persist-client-core": "5.102.
|
|
58
|
+
"@tanstack/query-persist-client-core": "5.102.5",
|
|
59
59
|
"@tanstack/query-test-utils": "0.0.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
@@ -11,18 +11,79 @@ import { useEffect, useMemo, useRef } from 'preact/hooks'
|
|
|
11
11
|
|
|
12
12
|
import { useQueryClient } from './QueryClientProvider'
|
|
13
13
|
|
|
14
|
+
/**
|
|
15
|
+
* The props accepted by `HydrationBoundary`.
|
|
16
|
+
*/
|
|
14
17
|
export interface HydrationBoundaryProps {
|
|
18
|
+
/**
|
|
19
|
+
* The state to hydrate.
|
|
20
|
+
*/
|
|
15
21
|
state: DehydratedState | null | undefined
|
|
22
|
+
/**
|
|
23
|
+
* Optional. Note: unlike `hydrate`, `mutations` cannot be set here.
|
|
24
|
+
*/
|
|
16
25
|
options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {
|
|
17
26
|
defaultOptions?: OmitKeyof<
|
|
18
27
|
Exclude<HydrateOptions['defaultOptions'], undefined>,
|
|
19
28
|
'mutations'
|
|
20
29
|
>
|
|
21
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* The components to render — always rendered unconditionally, not gated on hydration. New queries are
|
|
33
|
+
* hydrated into the cache during render; for queries that already exist in the cache, only newer dehydrated
|
|
34
|
+
* data is hydrated, and that happens in an effect after commit, so `children` may render briefly before it
|
|
35
|
+
* lands.
|
|
36
|
+
*/
|
|
22
37
|
children?: ComponentChildren
|
|
38
|
+
/**
|
|
39
|
+
* Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will be used.
|
|
40
|
+
*/
|
|
23
41
|
queryClient?: QueryClient
|
|
24
42
|
}
|
|
25
43
|
|
|
44
|
+
/**
|
|
45
|
+
* `HydrationBoundary` adds a previously dehydrated state into the `queryClient` that would be returned by
|
|
46
|
+
* `useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on
|
|
47
|
+
* update timestamp.
|
|
48
|
+
*
|
|
49
|
+
* Note: Only `queries` can be dehydrated with an `HydrationBoundary`.
|
|
50
|
+
*
|
|
51
|
+
* @returns The provided `children`, rendered unconditionally. New queries in `state` are hydrated into the
|
|
52
|
+
* cache during render; for queries already in the cache, only newer dehydrated data is hydrated, in an effect
|
|
53
|
+
* after commit.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```tsx
|
|
57
|
+
* import { HydrationBoundary } from '@tanstack/preact-query'
|
|
58
|
+
*
|
|
59
|
+
* function App() {
|
|
60
|
+
* return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>
|
|
61
|
+
* }
|
|
62
|
+
* ```
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* Server-side prefetch handed off to the client via `dehydrate`:
|
|
66
|
+
* ```tsx
|
|
67
|
+
* import { HydrationBoundary, dehydrate, noop } from '@tanstack/preact-query'
|
|
68
|
+
*
|
|
69
|
+
* async function ServerComponent() {
|
|
70
|
+
* const queryClient = getQueryClient()
|
|
71
|
+
*
|
|
72
|
+
* await queryClient
|
|
73
|
+
* .query({
|
|
74
|
+
* queryKey: ['posts'],
|
|
75
|
+
* queryFn: fetchPosts,
|
|
76
|
+
* })
|
|
77
|
+
* .catch(noop)
|
|
78
|
+
*
|
|
79
|
+
* return (
|
|
80
|
+
* <HydrationBoundary state={dehydrate(queryClient)}>
|
|
81
|
+
* <Posts />
|
|
82
|
+
* </HydrationBoundary>
|
|
83
|
+
* )
|
|
84
|
+
* }
|
|
85
|
+
* ```
|
|
86
|
+
*/
|
|
26
87
|
export const HydrationBoundary = ({
|
|
27
88
|
children,
|
|
28
89
|
options = {},
|
|
@@ -3,5 +3,17 @@ import { useContext } from 'preact/hooks'
|
|
|
3
3
|
|
|
4
4
|
const IsRestoringContext = createContext(false)
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* If you are using `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to
|
|
8
|
+
* check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid
|
|
9
|
+
* race conditions between the restore and mounting queries.
|
|
10
|
+
*
|
|
11
|
+
* @returns `true` while a persisted client is being restored, `false` otherwise.
|
|
12
|
+
*/
|
|
6
13
|
export const useIsRestoring = () => useContext(IsRestoringContext)
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently
|
|
17
|
+
* being restored, read by `useIsRestoring`.
|
|
18
|
+
*/
|
|
7
19
|
export const IsRestoringProvider = IsRestoringContext.Provider
|
|
@@ -3,10 +3,21 @@ import { createContext } from 'preact'
|
|
|
3
3
|
import type { ComponentChildren, VNode } from 'preact'
|
|
4
4
|
import { useContext, useEffect } from 'preact/hooks'
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.
|
|
8
|
+
*/
|
|
6
9
|
export const QueryClientContext = createContext<QueryClient | undefined>(
|
|
7
10
|
undefined,
|
|
8
11
|
)
|
|
9
12
|
|
|
13
|
+
/**
|
|
14
|
+
* The `useQueryClient` hook returns the current `QueryClient` instance.
|
|
15
|
+
*
|
|
16
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
17
|
+
* be used.
|
|
18
|
+
* @returns The current `QueryClient` instance.
|
|
19
|
+
* @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.
|
|
20
|
+
*/
|
|
10
21
|
export const useQueryClient = (queryClient?: QueryClient) => {
|
|
11
22
|
const client = useContext(QueryClientContext)
|
|
12
23
|
|
|
@@ -21,11 +32,41 @@ export const useQueryClient = (queryClient?: QueryClient) => {
|
|
|
21
32
|
return client
|
|
22
33
|
}
|
|
23
34
|
|
|
35
|
+
/**
|
|
36
|
+
* The props accepted by `QueryClientProvider`.
|
|
37
|
+
*/
|
|
24
38
|
export type QueryClientProviderProps = {
|
|
39
|
+
/**
|
|
40
|
+
* **Required**
|
|
41
|
+
*
|
|
42
|
+
* The `QueryClient` instance to provide.
|
|
43
|
+
*/
|
|
25
44
|
client: QueryClient
|
|
45
|
+
/**
|
|
46
|
+
* The components that get access to the provided `QueryClient`.
|
|
47
|
+
*/
|
|
26
48
|
children?: ComponentChildren
|
|
27
49
|
}
|
|
28
50
|
|
|
51
|
+
/**
|
|
52
|
+
* Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also
|
|
53
|
+
* calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to
|
|
54
|
+
* focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or
|
|
55
|
+
* comes back online).
|
|
56
|
+
*
|
|
57
|
+
* @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* ```tsx
|
|
61
|
+
* import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
|
|
62
|
+
*
|
|
63
|
+
* const queryClient = new QueryClient()
|
|
64
|
+
*
|
|
65
|
+
* function App() {
|
|
66
|
+
* return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
|
|
67
|
+
* }
|
|
68
|
+
* ```
|
|
69
|
+
*/
|
|
29
70
|
export const QueryClientProvider = ({
|
|
30
71
|
client,
|
|
31
72
|
children,
|
|
@@ -3,13 +3,34 @@ import type { ComponentChildren } from 'preact'
|
|
|
3
3
|
import { useContext, useState } from 'preact/hooks'
|
|
4
4
|
|
|
5
5
|
// CONTEXT
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Resets any query errors within the boundary, so queries know they can try again.
|
|
9
|
+
*/
|
|
6
10
|
export type QueryErrorResetFunction = () => void
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Returns whether the boundary has been reset and not yet cleared.
|
|
14
|
+
*/
|
|
7
15
|
export type QueryErrorIsResetFunction = () => boolean
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Clears the reset state, so queries know not to try again until the boundary is reset again.
|
|
19
|
+
*/
|
|
8
20
|
export type QueryErrorClearResetFunction = () => void
|
|
9
21
|
|
|
10
22
|
export interface QueryErrorResetBoundaryValue {
|
|
23
|
+
/**
|
|
24
|
+
* Clears the reset state, so queries know not to try again until the boundary is reset again.
|
|
25
|
+
*/
|
|
11
26
|
clearReset: QueryErrorClearResetFunction
|
|
27
|
+
/**
|
|
28
|
+
* Returns whether the boundary has been reset and not yet cleared.
|
|
29
|
+
*/
|
|
12
30
|
isReset: QueryErrorIsResetFunction
|
|
31
|
+
/**
|
|
32
|
+
* Resets any query errors within the boundary, so queries know they can try again.
|
|
33
|
+
*/
|
|
13
34
|
reset: QueryErrorResetFunction
|
|
14
35
|
}
|
|
15
36
|
|
|
@@ -32,19 +53,109 @@ const QueryErrorResetBoundaryContext = createContext(createValue())
|
|
|
32
53
|
|
|
33
54
|
// HOOK
|
|
34
55
|
|
|
56
|
+
/**
|
|
57
|
+
* This hook will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary
|
|
58
|
+
* defined it will reset them globally.
|
|
59
|
+
*
|
|
60
|
+
* @returns The boundary's {@link QueryErrorResetBoundaryValue}.
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* ```tsx
|
|
64
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
65
|
+
* import type { ComponentChildren } from 'preact'
|
|
66
|
+
* import { useQueryErrorResetBoundary } from '@tanstack/preact-query'
|
|
67
|
+
*
|
|
68
|
+
* function App({ children }: { children: ComponentChildren }) {
|
|
69
|
+
* const { reset } = useQueryErrorResetBoundary()
|
|
70
|
+
* const [error, resetError] = useErrorBoundary(() => reset())
|
|
71
|
+
*
|
|
72
|
+
* if (error) {
|
|
73
|
+
* return (
|
|
74
|
+
* <div>
|
|
75
|
+
* There was an error!
|
|
76
|
+
* <button onClick={() => resetError()}>Try again</button>
|
|
77
|
+
* </div>
|
|
78
|
+
* )
|
|
79
|
+
* }
|
|
80
|
+
*
|
|
81
|
+
* return children
|
|
82
|
+
* }
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
35
85
|
export const useQueryErrorResetBoundary = () =>
|
|
36
86
|
useContext(QueryErrorResetBoundaryContext)
|
|
37
87
|
|
|
38
88
|
// COMPONENT
|
|
39
89
|
|
|
90
|
+
/**
|
|
91
|
+
* A render-prop function usable as `children` on `QueryErrorResetBoundary`.
|
|
92
|
+
*
|
|
93
|
+
* @param value - The boundary's {@link QueryErrorResetBoundaryValue}.
|
|
94
|
+
* @returns The children to render.
|
|
95
|
+
*/
|
|
40
96
|
export type QueryErrorResetBoundaryFunction = (
|
|
41
97
|
value: QueryErrorResetBoundaryValue,
|
|
42
98
|
) => ComponentChildren
|
|
43
99
|
|
|
100
|
+
/**
|
|
101
|
+
* The props accepted by `QueryErrorResetBoundary`.
|
|
102
|
+
*/
|
|
44
103
|
export interface QueryErrorResetBoundaryProps {
|
|
104
|
+
/**
|
|
105
|
+
* Either a plain node, or a function that receives the boundary's {@link QueryErrorResetBoundaryValue} and
|
|
106
|
+
* returns a node.
|
|
107
|
+
*/
|
|
45
108
|
children: QueryErrorResetBoundaryFunction | ComponentChildren
|
|
46
109
|
}
|
|
47
110
|
|
|
111
|
+
/**
|
|
112
|
+
* When using `suspense` or `throwOnError` in your queries, you need a way to let queries know that you want to
|
|
113
|
+
* try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can
|
|
114
|
+
* reset any query errors within the boundaries of the component.
|
|
115
|
+
*
|
|
116
|
+
* @returns The `children`, rendered as-is, or called with the boundary's {@link QueryErrorResetBoundaryValue}
|
|
117
|
+
* if `children` is a function.
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* ```tsx
|
|
121
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
122
|
+
* import type { ComponentChildren } from 'preact'
|
|
123
|
+
* import { QueryErrorResetBoundary } from '@tanstack/preact-query'
|
|
124
|
+
*
|
|
125
|
+
* function ErrorBoundary({
|
|
126
|
+
* children,
|
|
127
|
+
* reset,
|
|
128
|
+
* }: {
|
|
129
|
+
* children: ComponentChildren
|
|
130
|
+
* reset: () => void
|
|
131
|
+
* }) {
|
|
132
|
+
* const [error, resetError] = useErrorBoundary(() => reset())
|
|
133
|
+
*
|
|
134
|
+
* if (error) {
|
|
135
|
+
* return (
|
|
136
|
+
* <div>
|
|
137
|
+
* There was an error!
|
|
138
|
+
* <button onClick={() => resetError()}>Try again</button>
|
|
139
|
+
* </div>
|
|
140
|
+
* )
|
|
141
|
+
* }
|
|
142
|
+
*
|
|
143
|
+
* return children
|
|
144
|
+
* }
|
|
145
|
+
*
|
|
146
|
+
* function App() {
|
|
147
|
+
* return (
|
|
148
|
+
* <QueryErrorResetBoundary>
|
|
149
|
+
* {({ reset }) => (
|
|
150
|
+
* <ErrorBoundary reset={reset}>
|
|
151
|
+
* <Page />
|
|
152
|
+
* </ErrorBoundary>
|
|
153
|
+
* )}
|
|
154
|
+
* </QueryErrorResetBoundary>
|
|
155
|
+
* )
|
|
156
|
+
* }
|
|
157
|
+
* ```
|
|
158
|
+
*/
|
|
48
159
|
export const QueryErrorResetBoundary = ({
|
|
49
160
|
children,
|
|
50
161
|
}: QueryErrorResetBoundaryProps) => {
|