@tanstack/preact-query 5.102.3 → 5.102.4
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 +75 -0
- package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.cts +106 -0
- package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.ts +106 -0
- package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.js +75 -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 +116 -0
- package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useInfiniteQuery.d.ts +116 -0
- package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useInfiniteQuery.js.map +1 -1
- package/build/legacy/useIsFetching.cjs +20 -0
- package/build/legacy/useIsFetching.cjs.map +1 -1
- package/build/legacy/useIsFetching.d.cts +20 -0
- package/build/legacy/useIsFetching.d.cts.map +1 -1
- package/build/legacy/useIsFetching.d.ts +20 -0
- package/build/legacy/useIsFetching.d.ts.map +1 -1
- package/build/legacy/useIsFetching.js +20 -0
- package/build/legacy/useIsFetching.js.map +1 -1
- package/build/legacy/useMutation.cjs +67 -0
- package/build/legacy/useMutation.cjs.map +1 -1
- package/build/legacy/useMutation.d.cts +67 -0
- package/build/legacy/useMutation.d.cts.map +1 -1
- package/build/legacy/useMutation.d.ts +67 -0
- package/build/legacy/useMutation.d.ts.map +1 -1
- package/build/legacy/useMutation.js +67 -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 +134 -0
- package/build/legacy/useQuery.d.cts.map +1 -1
- package/build/legacy/useQuery.d.ts +134 -0
- package/build/legacy/useQuery.d.ts.map +1 -1
- package/build/legacy/useQuery.js.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.cjs +48 -0
- package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.cts +48 -0
- package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.ts +48 -0
- package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.js +48 -0
- package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/legacy/useSuspenseQueries.cjs.map +1 -1
- package/build/legacy/useSuspenseQueries.d.cts +128 -2
- package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
- package/build/legacy/useSuspenseQueries.d.ts +128 -2
- package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
- package/build/legacy/useSuspenseQueries.js.map +1 -1
- package/build/legacy/useSuspenseQuery.cjs +43 -0
- package/build/legacy/useSuspenseQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseQuery.d.cts +43 -0
- package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseQuery.d.ts +43 -0
- package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseQuery.js +43 -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 +75 -0
- package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.cts +106 -0
- package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.ts +106 -0
- package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.js +75 -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 +116 -0
- package/build/modern/useInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useInfiniteQuery.d.ts +116 -0
- package/build/modern/useInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useInfiniteQuery.js.map +1 -1
- package/build/modern/useIsFetching.cjs +20 -0
- package/build/modern/useIsFetching.cjs.map +1 -1
- package/build/modern/useIsFetching.d.cts +20 -0
- package/build/modern/useIsFetching.d.cts.map +1 -1
- package/build/modern/useIsFetching.d.ts +20 -0
- package/build/modern/useIsFetching.d.ts.map +1 -1
- package/build/modern/useIsFetching.js +20 -0
- package/build/modern/useIsFetching.js.map +1 -1
- package/build/modern/useMutation.cjs +67 -0
- package/build/modern/useMutation.cjs.map +1 -1
- package/build/modern/useMutation.d.cts +67 -0
- package/build/modern/useMutation.d.cts.map +1 -1
- package/build/modern/useMutation.d.ts +67 -0
- package/build/modern/useMutation.d.ts.map +1 -1
- package/build/modern/useMutation.js +67 -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 +134 -0
- package/build/modern/useQuery.d.cts.map +1 -1
- package/build/modern/useQuery.d.ts +134 -0
- package/build/modern/useQuery.d.ts.map +1 -1
- package/build/modern/useQuery.js.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.cjs +48 -0
- package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.cts +48 -0
- package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.ts +48 -0
- package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.js +48 -0
- package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/modern/useSuspenseQueries.cjs.map +1 -1
- package/build/modern/useSuspenseQueries.d.cts +128 -2
- package/build/modern/useSuspenseQueries.d.cts.map +1 -1
- package/build/modern/useSuspenseQueries.d.ts +128 -2
- package/build/modern/useSuspenseQueries.d.ts.map +1 -1
- package/build/modern/useSuspenseQueries.js.map +1 -1
- package/build/modern/useSuspenseQuery.cjs +43 -0
- package/build/modern/useSuspenseQuery.cjs.map +1 -1
- package/build/modern/useSuspenseQuery.d.cts +43 -0
- package/build/modern/useSuspenseQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseQuery.d.ts +43 -0
- package/build/modern/useSuspenseQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseQuery.js +43 -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 +109 -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 +116 -0
- package/src/useIsFetching.ts +20 -0
- package/src/useMutation.ts +67 -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 +134 -0
- package/src/useSuspenseInfiniteQuery.ts +48 -0
- package/src/useSuspenseQueries.ts +128 -2
- package/src/useSuspenseQuery.ts +43 -0
|
@@ -1,14 +1,75 @@
|
|
|
1
1
|
import { DehydratedState, HydrateOptions, OmitKeyof, QueryClient } from "@tanstack/query-core";
|
|
2
2
|
import { ComponentChildren } from "preact";
|
|
3
3
|
//#region src/HydrationBoundary.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The props accepted by `HydrationBoundary`.
|
|
6
|
+
*/
|
|
4
7
|
interface HydrationBoundaryProps {
|
|
8
|
+
/**
|
|
9
|
+
* The state to hydrate.
|
|
10
|
+
*/
|
|
5
11
|
state: DehydratedState | null | undefined;
|
|
12
|
+
/**
|
|
13
|
+
* Optional. Note: unlike `hydrate`, `mutations` cannot be set here.
|
|
14
|
+
*/
|
|
6
15
|
options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {
|
|
7
16
|
defaultOptions?: OmitKeyof<Exclude<HydrateOptions['defaultOptions'], undefined>, 'mutations'>;
|
|
8
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* The components to render — always rendered unconditionally, not gated on hydration. New queries are
|
|
20
|
+
* hydrated into the cache during render; for queries that already exist in the cache, only newer dehydrated
|
|
21
|
+
* data is hydrated, and that happens in an effect after commit, so `children` may render briefly before it
|
|
22
|
+
* lands.
|
|
23
|
+
*/
|
|
9
24
|
children?: ComponentChildren;
|
|
25
|
+
/**
|
|
26
|
+
* Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will be used.
|
|
27
|
+
*/
|
|
10
28
|
queryClient?: QueryClient;
|
|
11
29
|
}
|
|
30
|
+
/**
|
|
31
|
+
* `HydrationBoundary` adds a previously dehydrated state into the `queryClient` that would be returned by
|
|
32
|
+
* `useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on
|
|
33
|
+
* update timestamp.
|
|
34
|
+
*
|
|
35
|
+
* Note: Only `queries` can be dehydrated with an `HydrationBoundary`.
|
|
36
|
+
*
|
|
37
|
+
* @returns The provided `children`, rendered unconditionally. New queries in `state` are hydrated into the
|
|
38
|
+
* cache during render; for queries already in the cache, only newer dehydrated data is hydrated, in an effect
|
|
39
|
+
* after commit.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* import { HydrationBoundary } from '@tanstack/preact-query'
|
|
44
|
+
*
|
|
45
|
+
* function App() {
|
|
46
|
+
* return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* Server-side prefetch handed off to the client via `dehydrate`:
|
|
52
|
+
* ```tsx
|
|
53
|
+
* import { HydrationBoundary, dehydrate, noop } from '@tanstack/preact-query'
|
|
54
|
+
*
|
|
55
|
+
* async function ServerComponent() {
|
|
56
|
+
* const queryClient = getQueryClient()
|
|
57
|
+
*
|
|
58
|
+
* await queryClient
|
|
59
|
+
* .query({
|
|
60
|
+
* queryKey: ['posts'],
|
|
61
|
+
* queryFn: fetchPosts,
|
|
62
|
+
* })
|
|
63
|
+
* .catch(noop)
|
|
64
|
+
*
|
|
65
|
+
* return (
|
|
66
|
+
* <HydrationBoundary state={dehydrate(queryClient)}>
|
|
67
|
+
* <Posts />
|
|
68
|
+
* </HydrationBoundary>
|
|
69
|
+
* )
|
|
70
|
+
* }
|
|
71
|
+
* ```
|
|
72
|
+
*/
|
|
12
73
|
declare const HydrationBoundary: ({ children, options, state, queryClient }: HydrationBoundaryProps) => import("preact").JSX.Element;
|
|
13
74
|
//#endregion
|
|
14
75
|
export { HydrationBoundary, HydrationBoundaryProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HydrationBoundary.d.ts","names":[],"sources":["../../src/HydrationBoundary.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HydrationBoundary.d.ts","names":[],"sources":["../../src/HydrationBoundary.tsx"],"mappings":";;;;;;UAgBiB;;;;EAIf,OAAO;;;;EAIP,UAAU,UAAU;IAClB,iBAAiB,UACf,QAAQ;;;;;;;;EAUZ,WAAW;;;;EAIX,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8CH,sBAAqB,UAAA,SAAA,OAAA,eAK/B,4CAAsB,IAAA"}
|
|
@@ -4,6 +4,49 @@ import { Fragment } from "preact";
|
|
|
4
4
|
import { useEffect, useMemo, useRef } from "preact/hooks";
|
|
5
5
|
import { jsx } from "preact/jsx-runtime";
|
|
6
6
|
//#region src/HydrationBoundary.tsx
|
|
7
|
+
/**
|
|
8
|
+
* `HydrationBoundary` adds a previously dehydrated state into the `queryClient` that would be returned by
|
|
9
|
+
* `useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on
|
|
10
|
+
* update timestamp.
|
|
11
|
+
*
|
|
12
|
+
* Note: Only `queries` can be dehydrated with an `HydrationBoundary`.
|
|
13
|
+
*
|
|
14
|
+
* @returns The provided `children`, rendered unconditionally. New queries in `state` are hydrated into the
|
|
15
|
+
* cache during render; for queries already in the cache, only newer dehydrated data is hydrated, in an effect
|
|
16
|
+
* after commit.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* import { HydrationBoundary } from '@tanstack/preact-query'
|
|
21
|
+
*
|
|
22
|
+
* function App() {
|
|
23
|
+
* return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>
|
|
24
|
+
* }
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* Server-side prefetch handed off to the client via `dehydrate`:
|
|
29
|
+
* ```tsx
|
|
30
|
+
* import { HydrationBoundary, dehydrate, noop } from '@tanstack/preact-query'
|
|
31
|
+
*
|
|
32
|
+
* async function ServerComponent() {
|
|
33
|
+
* const queryClient = getQueryClient()
|
|
34
|
+
*
|
|
35
|
+
* await queryClient
|
|
36
|
+
* .query({
|
|
37
|
+
* queryKey: ['posts'],
|
|
38
|
+
* queryFn: fetchPosts,
|
|
39
|
+
* })
|
|
40
|
+
* .catch(noop)
|
|
41
|
+
*
|
|
42
|
+
* return (
|
|
43
|
+
* <HydrationBoundary state={dehydrate(queryClient)}>
|
|
44
|
+
* <Posts />
|
|
45
|
+
* </HydrationBoundary>
|
|
46
|
+
* )
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
7
50
|
const HydrationBoundary = ({ children, options = {}, state, queryClient }) => {
|
|
8
51
|
const client = useQueryClient(queryClient);
|
|
9
52
|
const optionsRef = useRef(options);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HydrationBoundary.js","names":[],"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["import { hydrate } from '@tanstack/query-core'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\nimport { Fragment } from 'preact'\nimport type { ComponentChildren } from 'preact'\nimport { useEffect, useMemo, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\n\nexport interface HydrationBoundaryProps {\n state: DehydratedState | null | undefined\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n children?: ComponentChildren\n queryClient?: QueryClient\n}\n\nexport const HydrationBoundary = ({\n children,\n options = {},\n state,\n queryClient,\n}: HydrationBoundaryProps) => {\n const client = useQueryClient(queryClient)\n\n const optionsRef = useRef(options)\n useEffect(() => {\n optionsRef.current = options\n })\n\n // This useMemo is for performance reasons only, everything inside it must\n // be safe to run in every render and code here should be read as \"in render\".\n //\n // This code needs to happen during the render phase, because after initial\n // SSR, hydration needs to happen _before_ children render. Also, if hydrating\n // during a transition, we want to hydrate as much as is safe in render so\n // we can prerender as much as possible.\n //\n // For any queries that already exist in the cache, we want to hold back on\n // hydrating until _after_ the render phase. The reason for this is that during\n // transitions, we don't want the existing queries and observers to update to\n // the new data on the current page, only _after_ the transition is committed.\n // If the transition is aborted, we will have hydrated any _new_ queries, but\n // we throw away the fresh data for any existing ones to avoid unexpectedly\n // updating the UI.\n const hydrationQueue: DehydratedState['queries'] | undefined = useMemo(() => {\n if (state) {\n if (typeof state !== 'object') {\n return\n }\n\n const queryCache = client.getQueryCache()\n // State is supplied from the outside and we might as well fail\n // gracefully if it has the wrong shape, so while we type `queries`\n // as required, we still provide a fallback.\n const queries = state.queries || []\n\n const newQueries: DehydratedState['queries'] = []\n const existingQueries: DehydratedState['queries'] = []\n for (const dehydratedQuery of queries) {\n const existingQuery = queryCache.get(dehydratedQuery.queryHash)\n\n if (!existingQuery) {\n newQueries.push(dehydratedQuery)\n } else {\n const hydrationIsNewer =\n dehydratedQuery.state.dataUpdatedAt >\n existingQuery.state.dataUpdatedAt ||\n (dehydratedQuery.promise &&\n existingQuery.state.status !== 'pending' &&\n existingQuery.state.fetchStatus !== 'fetching' &&\n dehydratedQuery.dehydratedAt !== undefined &&\n dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)\n\n if (hydrationIsNewer) {\n existingQueries.push(dehydratedQuery)\n }\n }\n }\n\n if (newQueries.length > 0) {\n // It's actually fine to call this with queries/state that already exists\n // in the cache, or is older. hydrate() is idempotent for queries.\n hydrate(client, { queries: newQueries }, optionsRef.current)\n }\n if (existingQueries.length > 0) {\n return existingQueries\n }\n }\n return undefined\n }, [client, state])\n\n useEffect(() => {\n if (hydrationQueue) {\n hydrate(client, { queries: hydrationQueue }, optionsRef.current)\n }\n }, [client, hydrationQueue])\n\n return <Fragment>{children}</Fragment>\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HydrationBoundary.js","names":[],"sources":["../../src/HydrationBoundary.tsx"],"sourcesContent":["import { hydrate } from '@tanstack/query-core'\nimport type {\n DehydratedState,\n HydrateOptions,\n OmitKeyof,\n QueryClient,\n} from '@tanstack/query-core'\nimport { Fragment } from 'preact'\nimport type { ComponentChildren } from 'preact'\nimport { useEffect, useMemo, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\n\n/**\n * The props accepted by `HydrationBoundary`.\n */\nexport interface HydrationBoundaryProps {\n /**\n * The state to hydrate.\n */\n state: DehydratedState | null | undefined\n /**\n * Optional. Note: unlike `hydrate`, `mutations` cannot be set here.\n */\n options?: OmitKeyof<HydrateOptions, 'defaultOptions'> & {\n defaultOptions?: OmitKeyof<\n Exclude<HydrateOptions['defaultOptions'], undefined>,\n 'mutations'\n >\n }\n /**\n * The components to render — always rendered unconditionally, not gated on hydration. New queries are\n * hydrated into the cache during render; for queries that already exist in the cache, only newer dehydrated\n * data is hydrated, and that happens in an effect after commit, so `children` may render briefly before it\n * lands.\n */\n children?: ComponentChildren\n /**\n * Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will be used.\n */\n queryClient?: QueryClient\n}\n\n/**\n * `HydrationBoundary` adds a previously dehydrated state into the `queryClient` that would be returned by\n * `useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on\n * update timestamp.\n *\n * Note: Only `queries` can be dehydrated with an `HydrationBoundary`.\n *\n * @returns The provided `children`, rendered unconditionally. New queries in `state` are hydrated into the\n * cache during render; for queries already in the cache, only newer dehydrated data is hydrated, in an effect\n * after commit.\n *\n * @example\n * ```tsx\n * import { HydrationBoundary } from '@tanstack/preact-query'\n *\n * function App() {\n * return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>\n * }\n * ```\n *\n * @example\n * Server-side prefetch handed off to the client via `dehydrate`:\n * ```tsx\n * import { HydrationBoundary, dehydrate, noop } from '@tanstack/preact-query'\n *\n * async function ServerComponent() {\n * const queryClient = getQueryClient()\n *\n * await queryClient\n * .query({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n * .catch(noop)\n *\n * return (\n * <HydrationBoundary state={dehydrate(queryClient)}>\n * <Posts />\n * </HydrationBoundary>\n * )\n * }\n * ```\n */\nexport const HydrationBoundary = ({\n children,\n options = {},\n state,\n queryClient,\n}: HydrationBoundaryProps) => {\n const client = useQueryClient(queryClient)\n\n const optionsRef = useRef(options)\n useEffect(() => {\n optionsRef.current = options\n })\n\n // This useMemo is for performance reasons only, everything inside it must\n // be safe to run in every render and code here should be read as \"in render\".\n //\n // This code needs to happen during the render phase, because after initial\n // SSR, hydration needs to happen _before_ children render. Also, if hydrating\n // during a transition, we want to hydrate as much as is safe in render so\n // we can prerender as much as possible.\n //\n // For any queries that already exist in the cache, we want to hold back on\n // hydrating until _after_ the render phase. The reason for this is that during\n // transitions, we don't want the existing queries and observers to update to\n // the new data on the current page, only _after_ the transition is committed.\n // If the transition is aborted, we will have hydrated any _new_ queries, but\n // we throw away the fresh data for any existing ones to avoid unexpectedly\n // updating the UI.\n const hydrationQueue: DehydratedState['queries'] | undefined = useMemo(() => {\n if (state) {\n if (typeof state !== 'object') {\n return\n }\n\n const queryCache = client.getQueryCache()\n // State is supplied from the outside and we might as well fail\n // gracefully if it has the wrong shape, so while we type `queries`\n // as required, we still provide a fallback.\n const queries = state.queries || []\n\n const newQueries: DehydratedState['queries'] = []\n const existingQueries: DehydratedState['queries'] = []\n for (const dehydratedQuery of queries) {\n const existingQuery = queryCache.get(dehydratedQuery.queryHash)\n\n if (!existingQuery) {\n newQueries.push(dehydratedQuery)\n } else {\n const hydrationIsNewer =\n dehydratedQuery.state.dataUpdatedAt >\n existingQuery.state.dataUpdatedAt ||\n (dehydratedQuery.promise &&\n existingQuery.state.status !== 'pending' &&\n existingQuery.state.fetchStatus !== 'fetching' &&\n dehydratedQuery.dehydratedAt !== undefined &&\n dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)\n\n if (hydrationIsNewer) {\n existingQueries.push(dehydratedQuery)\n }\n }\n }\n\n if (newQueries.length > 0) {\n // It's actually fine to call this with queries/state that already exists\n // in the cache, or is older. hydrate() is idempotent for queries.\n hydrate(client, { queries: newQueries }, optionsRef.current)\n }\n if (existingQueries.length > 0) {\n return existingQueries\n }\n }\n return undefined\n }, [client, state])\n\n useEffect(() => {\n if (hydrationQueue) {\n hydrate(client, { queries: hydrationQueue }, optionsRef.current)\n }\n }, [client, hydrationQueue])\n\n return <Fragment>{children}</Fragment>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAa,qBAAqB,EAChC,UACA,UAAU,CAAC,GACX,OACA,kBAC4B;CAC5B,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,aAAa,OAAO,OAAO;CACjC,gBAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAiBD,MAAM,iBAAyD,cAAc;EAC3E,IAAI,OAAO;GACT,IAAI,OAAO,UAAU,UACnB;GAGF,MAAM,aAAa,OAAO,cAAc;GAIxC,MAAM,UAAU,MAAM,WAAW,CAAC;GAElC,MAAM,aAAyC,CAAC;GAChD,MAAM,kBAA8C,CAAC;GACrD,KAAK,MAAM,mBAAmB,SAAS;IACrC,MAAM,gBAAgB,WAAW,IAAI,gBAAgB,SAAS;IAE9D,IAAI,CAAC,eACH,WAAW,KAAK,eAAe;SAW/B,IARE,gBAAgB,MAAM,gBACpB,cAAc,MAAM,iBACrB,gBAAgB,WACf,cAAc,MAAM,WAAW,aAC/B,cAAc,MAAM,gBAAgB,cACpC,gBAAgB,iBAAiB,KAAA,KACjC,gBAAgB,eAAe,cAAc,MAAM,eAGrD,gBAAgB,KAAK,eAAe;GAG1C;GAEA,IAAI,WAAW,SAAS,GAGtB,QAAQ,QAAQ,EAAE,SAAS,WAAW,GAAG,WAAW,OAAO;GAE7D,IAAI,gBAAgB,SAAS,GAC3B,OAAO;EAEX;CAEF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,gBAAgB;EACd,IAAI,gBACF,QAAQ,QAAQ,EAAE,SAAS,eAAe,GAAG,WAAW,OAAO;CAEnE,GAAG,CAAC,QAAQ,cAAc,CAAC;CAE3B,OAAO,oBAAC,UAAD,EAAW,SAAmB,CAAA;AACvC"}
|
|
@@ -3,7 +3,18 @@ let preact = require("preact");
|
|
|
3
3
|
let preact_hooks = require("preact/hooks");
|
|
4
4
|
//#region src/IsRestoringProvider.ts
|
|
5
5
|
const IsRestoringContext = (0, preact.createContext)(false);
|
|
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
|
const useIsRestoring = () => (0, preact_hooks.useContext)(IsRestoringContext);
|
|
14
|
+
/**
|
|
15
|
+
* The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently
|
|
16
|
+
* being restored, read by `useIsRestoring`.
|
|
17
|
+
*/
|
|
7
18
|
const IsRestoringProvider = IsRestoringContext.Provider;
|
|
8
19
|
//#endregion
|
|
9
20
|
exports.IsRestoringProvider = IsRestoringProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IsRestoringProvider.cjs","names":["createContext","useContext"],"sources":["../../src/IsRestoringProvider.ts"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext } from 'preact/hooks'\n\nconst IsRestoringContext = createContext(false)\n\nexport const useIsRestoring = () => useContext(IsRestoringContext)\nexport const IsRestoringProvider = IsRestoringContext.Provider\n"],"mappings":";;;;AAGA,MAAM,sBAAA,GAAqBA,OAAAA,cAAAA,CAAc,KAAK
|
|
1
|
+
{"version":3,"file":"IsRestoringProvider.cjs","names":["createContext","useContext"],"sources":["../../src/IsRestoringProvider.ts"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext } from 'preact/hooks'\n\nconst IsRestoringContext = createContext(false)\n\n/**\n * If you are using `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to\n * check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid\n * race conditions between the restore and mounting queries.\n *\n * @returns `true` while a persisted client is being restored, `false` otherwise.\n */\nexport const useIsRestoring = () => useContext(IsRestoringContext)\n\n/**\n * The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently\n * being restored, read by `useIsRestoring`.\n */\nexport const IsRestoringProvider = IsRestoringContext.Provider\n"],"mappings":";;;;AAGA,MAAM,sBAAA,GAAqBA,OAAAA,cAAAA,CAAc,KAAK;;;;;;;;AAS9C,MAAa,wBAAA,GAAuBC,aAAAA,WAAAA,CAAW,kBAAkB;;;;;AAMjE,MAAa,sBAAsB,mBAAmB"}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
//#region src/IsRestoringProvider.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* If you are using `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to
|
|
4
|
+
* check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid
|
|
5
|
+
* race conditions between the restore and mounting queries.
|
|
6
|
+
*
|
|
7
|
+
* @returns `true` while a persisted client is being restored, `false` otherwise.
|
|
8
|
+
*/
|
|
2
9
|
declare const useIsRestoring: () => boolean;
|
|
10
|
+
/**
|
|
11
|
+
* The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently
|
|
12
|
+
* being restored, read by `useIsRestoring`.
|
|
13
|
+
*/
|
|
3
14
|
declare const IsRestoringProvider: import("preact").Provider<boolean>;
|
|
4
15
|
//#endregion
|
|
5
16
|
export { IsRestoringProvider, useIsRestoring };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IsRestoringProvider.d.cts","names":[],"sources":["../../src/IsRestoringProvider.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IsRestoringProvider.d.cts","names":[],"sources":["../../src/IsRestoringProvider.ts"],"mappings":";;;;;;;;cAYa;;;;;cAMA,sCAAmB"}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
//#region src/IsRestoringProvider.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* If you are using `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to
|
|
4
|
+
* check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid
|
|
5
|
+
* race conditions between the restore and mounting queries.
|
|
6
|
+
*
|
|
7
|
+
* @returns `true` while a persisted client is being restored, `false` otherwise.
|
|
8
|
+
*/
|
|
2
9
|
declare const useIsRestoring: () => boolean;
|
|
10
|
+
/**
|
|
11
|
+
* The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently
|
|
12
|
+
* being restored, read by `useIsRestoring`.
|
|
13
|
+
*/
|
|
3
14
|
declare const IsRestoringProvider: import("preact").Provider<boolean>;
|
|
4
15
|
//#endregion
|
|
5
16
|
export { IsRestoringProvider, useIsRestoring };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IsRestoringProvider.d.ts","names":[],"sources":["../../src/IsRestoringProvider.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IsRestoringProvider.d.ts","names":[],"sources":["../../src/IsRestoringProvider.ts"],"mappings":";;;;;;;;cAYa;;;;;cAMA,sCAAmB"}
|
|
@@ -2,7 +2,18 @@ import { createContext } from "preact";
|
|
|
2
2
|
import { useContext } from "preact/hooks";
|
|
3
3
|
//#region src/IsRestoringProvider.ts
|
|
4
4
|
const IsRestoringContext = createContext(false);
|
|
5
|
+
/**
|
|
6
|
+
* If you are using `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to
|
|
7
|
+
* check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid
|
|
8
|
+
* race conditions between the restore and mounting queries.
|
|
9
|
+
*
|
|
10
|
+
* @returns `true` while a persisted client is being restored, `false` otherwise.
|
|
11
|
+
*/
|
|
5
12
|
const useIsRestoring = () => useContext(IsRestoringContext);
|
|
13
|
+
/**
|
|
14
|
+
* The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently
|
|
15
|
+
* being restored, read by `useIsRestoring`.
|
|
16
|
+
*/
|
|
6
17
|
const IsRestoringProvider = IsRestoringContext.Provider;
|
|
7
18
|
//#endregion
|
|
8
19
|
export { IsRestoringProvider, useIsRestoring };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IsRestoringProvider.js","names":[],"sources":["../../src/IsRestoringProvider.ts"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext } from 'preact/hooks'\n\nconst IsRestoringContext = createContext(false)\n\nexport const useIsRestoring = () => useContext(IsRestoringContext)\nexport const IsRestoringProvider = IsRestoringContext.Provider\n"],"mappings":";;;AAGA,MAAM,qBAAqB,cAAc,KAAK
|
|
1
|
+
{"version":3,"file":"IsRestoringProvider.js","names":[],"sources":["../../src/IsRestoringProvider.ts"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext } from 'preact/hooks'\n\nconst IsRestoringContext = createContext(false)\n\n/**\n * If you are using `PersistQueryClientProvider`, you can also use the `useIsRestoring` hook alongside it to\n * check if a restore is currently in progress. `useQuery` and friends also check this internally to avoid\n * race conditions between the restore and mounting queries.\n *\n * @returns `true` while a persisted client is being restored, `false` otherwise.\n */\nexport const useIsRestoring = () => useContext(IsRestoringContext)\n\n/**\n * The Provider that `PersistQueryClientProvider` uses to signal whether a persisted client is currently\n * being restored, read by `useIsRestoring`.\n */\nexport const IsRestoringProvider = IsRestoringContext.Provider\n"],"mappings":";;;AAGA,MAAM,qBAAqB,cAAc,KAAK;;;;;;;;AAS9C,MAAa,uBAAuB,WAAW,kBAAkB;;;;;AAMjE,MAAa,sBAAsB,mBAAmB"}
|
|
@@ -3,13 +3,43 @@ let preact = require("preact");
|
|
|
3
3
|
let preact_hooks = require("preact/hooks");
|
|
4
4
|
let preact_jsx_runtime = require("preact/jsx-runtime");
|
|
5
5
|
//#region src/QueryClientProvider.tsx
|
|
6
|
+
/**
|
|
7
|
+
* The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.
|
|
8
|
+
*/
|
|
6
9
|
const QueryClientContext = (0, preact.createContext)(void 0);
|
|
10
|
+
/**
|
|
11
|
+
* The `useQueryClient` hook returns the current `QueryClient` instance.
|
|
12
|
+
*
|
|
13
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
14
|
+
* be used.
|
|
15
|
+
* @returns The current `QueryClient` instance.
|
|
16
|
+
* @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.
|
|
17
|
+
*/
|
|
7
18
|
const useQueryClient = (queryClient) => {
|
|
8
19
|
const client = (0, preact_hooks.useContext)(QueryClientContext);
|
|
9
20
|
if (queryClient) return queryClient;
|
|
10
21
|
if (!client) throw new Error("No QueryClient set, use QueryClientProvider to set one");
|
|
11
22
|
return client;
|
|
12
23
|
};
|
|
24
|
+
/**
|
|
25
|
+
* Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also
|
|
26
|
+
* calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to
|
|
27
|
+
* focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or
|
|
28
|
+
* comes back online).
|
|
29
|
+
*
|
|
30
|
+
* @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```tsx
|
|
34
|
+
* import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
|
|
35
|
+
*
|
|
36
|
+
* const queryClient = new QueryClient()
|
|
37
|
+
*
|
|
38
|
+
* function App() {
|
|
39
|
+
* return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
|
|
40
|
+
* }
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
13
43
|
const QueryClientProvider = ({ client, children }) => {
|
|
14
44
|
(0, preact_hooks.useEffect)(() => {
|
|
15
45
|
client.mount();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryClientProvider.cjs","names":["createContext","useContext"],"sources":["../../src/QueryClientProvider.tsx"],"sourcesContent":["import type { QueryClient } from '@tanstack/query-core'\nimport { createContext } from 'preact'\nimport type { ComponentChildren, VNode } from 'preact'\nimport { useContext, useEffect } from 'preact/hooks'\n\nexport const QueryClientContext = createContext<QueryClient | undefined>(\n undefined,\n)\n\nexport const useQueryClient = (queryClient?: QueryClient) => {\n const client = useContext(QueryClientContext)\n\n if (queryClient) {\n return queryClient\n }\n\n if (!client) {\n throw new Error('No QueryClient set, use QueryClientProvider to set one')\n }\n\n return client\n}\n\nexport type QueryClientProviderProps = {\n client: QueryClient\n children?: ComponentChildren\n}\n\nexport const QueryClientProvider = ({\n client,\n children,\n}: QueryClientProviderProps): VNode => {\n useEffect(() => {\n client.mount()\n return () => {\n client.unmount()\n }\n }, [client])\n\n return (\n <QueryClientContext.Provider value={client}>\n {children}\n </QueryClientContext.Provider>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"QueryClientProvider.cjs","names":["createContext","useContext"],"sources":["../../src/QueryClientProvider.tsx"],"sourcesContent":["import type { QueryClient } from '@tanstack/query-core'\nimport { createContext } from 'preact'\nimport type { ComponentChildren, VNode } from 'preact'\nimport { useContext, useEffect } from 'preact/hooks'\n\n/**\n * The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.\n */\nexport const QueryClientContext = createContext<QueryClient | undefined>(\n undefined,\n)\n\n/**\n * The `useQueryClient` hook returns the current `QueryClient` instance.\n *\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current `QueryClient` instance.\n * @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.\n */\nexport const useQueryClient = (queryClient?: QueryClient) => {\n const client = useContext(QueryClientContext)\n\n if (queryClient) {\n return queryClient\n }\n\n if (!client) {\n throw new Error('No QueryClient set, use QueryClientProvider to set one')\n }\n\n return client\n}\n\n/**\n * The props accepted by `QueryClientProvider`.\n */\nexport type QueryClientProviderProps = {\n /**\n * **Required**\n *\n * The `QueryClient` instance to provide.\n */\n client: QueryClient\n /**\n * The components that get access to the provided `QueryClient`.\n */\n children?: ComponentChildren\n}\n\n/**\n * Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also\n * calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to\n * focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or\n * comes back online).\n *\n * @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.\n *\n * @example\n * ```tsx\n * import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'\n *\n * const queryClient = new QueryClient()\n *\n * function App() {\n * return <QueryClientProvider client={queryClient}>...</QueryClientProvider>\n * }\n * ```\n */\nexport const QueryClientProvider = ({\n client,\n children,\n}: QueryClientProviderProps): VNode => {\n useEffect(() => {\n client.mount()\n return () => {\n client.unmount()\n }\n }, [client])\n\n return (\n <QueryClientContext.Provider value={client}>\n {children}\n </QueryClientContext.Provider>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,sBAAA,GAAqBA,OAAAA,cAAAA,CAChC,KAAA,CACF;;;;;;;;;AAUA,MAAa,kBAAkB,gBAA8B;CAC3D,MAAM,UAAA,GAASC,aAAAA,WAAAA,CAAW,kBAAkB;CAE5C,IAAI,aACF,OAAO;CAGT,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,wDAAwD;CAG1E,OAAO;AACT;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,uBAAuB,EAClC,QACA,eACqC;CACrC,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,OAAO,MAAM;EACb,aAAa;GACX,OAAO,QAAQ;EACjB;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,mBAAA,IAAA,CAAC,mBAAmB,UAApB;EAA6B,OAAO;EACjC;CAC0B,CAAA;AAEjC"}
|
|
@@ -1,12 +1,53 @@
|
|
|
1
1
|
import { QueryClient } from "@tanstack/query-core";
|
|
2
2
|
import { ComponentChildren, VNode } from "preact";
|
|
3
3
|
//#region src/QueryClientProvider.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.
|
|
6
|
+
*/
|
|
4
7
|
declare const QueryClientContext: import("preact").Context<QueryClient | undefined>;
|
|
8
|
+
/**
|
|
9
|
+
* The `useQueryClient` hook returns the current `QueryClient` instance.
|
|
10
|
+
*
|
|
11
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
12
|
+
* be used.
|
|
13
|
+
* @returns The current `QueryClient` instance.
|
|
14
|
+
* @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.
|
|
15
|
+
*/
|
|
5
16
|
declare const useQueryClient: (queryClient?: QueryClient) => QueryClient;
|
|
17
|
+
/**
|
|
18
|
+
* The props accepted by `QueryClientProvider`.
|
|
19
|
+
*/
|
|
6
20
|
type QueryClientProviderProps = {
|
|
21
|
+
/**
|
|
22
|
+
* **Required**
|
|
23
|
+
*
|
|
24
|
+
* The `QueryClient` instance to provide.
|
|
25
|
+
*/
|
|
7
26
|
client: QueryClient;
|
|
27
|
+
/**
|
|
28
|
+
* The components that get access to the provided `QueryClient`.
|
|
29
|
+
*/
|
|
8
30
|
children?: ComponentChildren;
|
|
9
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also
|
|
34
|
+
* calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to
|
|
35
|
+
* focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or
|
|
36
|
+
* comes back online).
|
|
37
|
+
*
|
|
38
|
+
* @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
|
|
43
|
+
*
|
|
44
|
+
* const queryClient = new QueryClient()
|
|
45
|
+
*
|
|
46
|
+
* function App() {
|
|
47
|
+
* return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
10
51
|
declare const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => VNode;
|
|
11
52
|
//#endregion
|
|
12
53
|
export { QueryClientContext, QueryClientProvider, QueryClientProviderProps, useQueryClient };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryClientProvider.d.cts","names":[],"sources":["../../src/QueryClientProvider.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"QueryClientProvider.d.cts","names":[],"sources":["../../src/QueryClientProvider.tsx"],"mappings":";;;;;;cAQa,qCAAkB,QAAA;;;;;;;;;cAYlB,iBAAkB,cAAc,gBAAW;;;;KAiB5C;;;;;;EAMV,QAAQ;;;;EAIR,WAAW;;;;;;;;;;;;;;;;;;;;;cAsBA,wBAAuB,QAAA,YAGjC,6BAA2B"}
|
|
@@ -1,12 +1,53 @@
|
|
|
1
1
|
import { QueryClient } from "@tanstack/query-core";
|
|
2
2
|
import { ComponentChildren, VNode } from "preact";
|
|
3
3
|
//#region src/QueryClientProvider.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.
|
|
6
|
+
*/
|
|
4
7
|
declare const QueryClientContext: import("preact").Context<QueryClient | undefined>;
|
|
8
|
+
/**
|
|
9
|
+
* The `useQueryClient` hook returns the current `QueryClient` instance.
|
|
10
|
+
*
|
|
11
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
12
|
+
* be used.
|
|
13
|
+
* @returns The current `QueryClient` instance.
|
|
14
|
+
* @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.
|
|
15
|
+
*/
|
|
5
16
|
declare const useQueryClient: (queryClient?: QueryClient) => QueryClient;
|
|
17
|
+
/**
|
|
18
|
+
* The props accepted by `QueryClientProvider`.
|
|
19
|
+
*/
|
|
6
20
|
type QueryClientProviderProps = {
|
|
21
|
+
/**
|
|
22
|
+
* **Required**
|
|
23
|
+
*
|
|
24
|
+
* The `QueryClient` instance to provide.
|
|
25
|
+
*/
|
|
7
26
|
client: QueryClient;
|
|
27
|
+
/**
|
|
28
|
+
* The components that get access to the provided `QueryClient`.
|
|
29
|
+
*/
|
|
8
30
|
children?: ComponentChildren;
|
|
9
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also
|
|
34
|
+
* calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to
|
|
35
|
+
* focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or
|
|
36
|
+
* comes back online).
|
|
37
|
+
*
|
|
38
|
+
* @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
|
|
43
|
+
*
|
|
44
|
+
* const queryClient = new QueryClient()
|
|
45
|
+
*
|
|
46
|
+
* function App() {
|
|
47
|
+
* return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
|
|
48
|
+
* }
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
10
51
|
declare const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => VNode;
|
|
11
52
|
//#endregion
|
|
12
53
|
export { QueryClientContext, QueryClientProvider, QueryClientProviderProps, useQueryClient };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryClientProvider.d.ts","names":[],"sources":["../../src/QueryClientProvider.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"QueryClientProvider.d.ts","names":[],"sources":["../../src/QueryClientProvider.tsx"],"mappings":";;;;;;cAQa,qCAAkB,QAAA;;;;;;;;;cAYlB,iBAAkB,cAAc,gBAAW;;;;KAiB5C;;;;;;EAMV,QAAQ;;;;EAIR,WAAW;;;;;;;;;;;;;;;;;;;;;cAsBA,wBAAuB,QAAA,YAGjC,6BAA2B"}
|
|
@@ -2,13 +2,43 @@ import { createContext } from "preact";
|
|
|
2
2
|
import { useContext, useEffect } from "preact/hooks";
|
|
3
3
|
import { jsx } from "preact/jsx-runtime";
|
|
4
4
|
//#region src/QueryClientProvider.tsx
|
|
5
|
+
/**
|
|
6
|
+
* The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.
|
|
7
|
+
*/
|
|
5
8
|
const QueryClientContext = createContext(void 0);
|
|
9
|
+
/**
|
|
10
|
+
* The `useQueryClient` hook returns the current `QueryClient` instance.
|
|
11
|
+
*
|
|
12
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
13
|
+
* be used.
|
|
14
|
+
* @returns The current `QueryClient` instance.
|
|
15
|
+
* @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.
|
|
16
|
+
*/
|
|
6
17
|
const useQueryClient = (queryClient) => {
|
|
7
18
|
const client = useContext(QueryClientContext);
|
|
8
19
|
if (queryClient) return queryClient;
|
|
9
20
|
if (!client) throw new Error("No QueryClient set, use QueryClientProvider to set one");
|
|
10
21
|
return client;
|
|
11
22
|
};
|
|
23
|
+
/**
|
|
24
|
+
* Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also
|
|
25
|
+
* calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to
|
|
26
|
+
* focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or
|
|
27
|
+
* comes back online).
|
|
28
|
+
*
|
|
29
|
+
* @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
|
|
34
|
+
*
|
|
35
|
+
* const queryClient = new QueryClient()
|
|
36
|
+
*
|
|
37
|
+
* function App() {
|
|
38
|
+
* return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
|
|
39
|
+
* }
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
12
42
|
const QueryClientProvider = ({ client, children }) => {
|
|
13
43
|
useEffect(() => {
|
|
14
44
|
client.mount();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryClientProvider.js","names":[],"sources":["../../src/QueryClientProvider.tsx"],"sourcesContent":["import type { QueryClient } from '@tanstack/query-core'\nimport { createContext } from 'preact'\nimport type { ComponentChildren, VNode } from 'preact'\nimport { useContext, useEffect } from 'preact/hooks'\n\nexport const QueryClientContext = createContext<QueryClient | undefined>(\n undefined,\n)\n\nexport const useQueryClient = (queryClient?: QueryClient) => {\n const client = useContext(QueryClientContext)\n\n if (queryClient) {\n return queryClient\n }\n\n if (!client) {\n throw new Error('No QueryClient set, use QueryClientProvider to set one')\n }\n\n return client\n}\n\nexport type QueryClientProviderProps = {\n client: QueryClient\n children?: ComponentChildren\n}\n\nexport const QueryClientProvider = ({\n client,\n children,\n}: QueryClientProviderProps): VNode => {\n useEffect(() => {\n client.mount()\n return () => {\n client.unmount()\n }\n }, [client])\n\n return (\n <QueryClientContext.Provider value={client}>\n {children}\n </QueryClientContext.Provider>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"QueryClientProvider.js","names":[],"sources":["../../src/QueryClientProvider.tsx"],"sourcesContent":["import type { QueryClient } from '@tanstack/query-core'\nimport { createContext } from 'preact'\nimport type { ComponentChildren, VNode } from 'preact'\nimport { useContext, useEffect } from 'preact/hooks'\n\n/**\n * The context that `useQueryClient` reads from. `QueryClientProvider` is the normal way to set it.\n */\nexport const QueryClientContext = createContext<QueryClient | undefined>(\n undefined,\n)\n\n/**\n * The `useQueryClient` hook returns the current `QueryClient` instance.\n *\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current `QueryClient` instance.\n * @throws If no `queryClient` argument is passed and no `QueryClientProvider` is found in the component tree.\n */\nexport const useQueryClient = (queryClient?: QueryClient) => {\n const client = useContext(QueryClientContext)\n\n if (queryClient) {\n return queryClient\n }\n\n if (!client) {\n throw new Error('No QueryClient set, use QueryClientProvider to set one')\n }\n\n return client\n}\n\n/**\n * The props accepted by `QueryClientProvider`.\n */\nexport type QueryClientProviderProps = {\n /**\n * **Required**\n *\n * The `QueryClient` instance to provide.\n */\n client: QueryClient\n /**\n * The components that get access to the provided `QueryClient`.\n */\n children?: ComponentChildren\n}\n\n/**\n * Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application. Also\n * calls `client.mount()`/`client.unmount()` as this component mounts/unmounts, which subscribes the client to\n * focus/online events (resuming any paused mutations and refetching as needed when the app regains focus or\n * comes back online).\n *\n * @returns The provided `children`, wrapped so they can read the `QueryClient` via `useQueryClient`.\n *\n * @example\n * ```tsx\n * import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'\n *\n * const queryClient = new QueryClient()\n *\n * function App() {\n * return <QueryClientProvider client={queryClient}>...</QueryClientProvider>\n * }\n * ```\n */\nexport const QueryClientProvider = ({\n client,\n children,\n}: QueryClientProviderProps): VNode => {\n useEffect(() => {\n client.mount()\n return () => {\n client.unmount()\n }\n }, [client])\n\n return (\n <QueryClientContext.Provider value={client}>\n {children}\n </QueryClientContext.Provider>\n )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,qBAAqB,cAChC,KAAA,CACF;;;;;;;;;AAUA,MAAa,kBAAkB,gBAA8B;CAC3D,MAAM,SAAS,WAAW,kBAAkB;CAE5C,IAAI,aACF,OAAO;CAGT,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,wDAAwD;CAG1E,OAAO;AACT;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,uBAAuB,EAClC,QACA,eACqC;CACrC,gBAAgB;EACd,OAAO,MAAM;EACb,aAAa;GACX,OAAO,QAAQ;EACjB;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EACjC;CAC0B,CAAA;AAEjC"}
|
|
@@ -18,7 +18,82 @@ function createValue() {
|
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
20
|
const QueryErrorResetBoundaryContext = (0, preact.createContext)(createValue());
|
|
21
|
+
/**
|
|
22
|
+
* This hook will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary
|
|
23
|
+
* defined it will reset them globally.
|
|
24
|
+
*
|
|
25
|
+
* @returns The boundary's {@link QueryErrorResetBoundaryValue}.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
30
|
+
* import type { ComponentChildren } from 'preact'
|
|
31
|
+
* import { useQueryErrorResetBoundary } from '@tanstack/preact-query'
|
|
32
|
+
*
|
|
33
|
+
* function App({ children }: { children: ComponentChildren }) {
|
|
34
|
+
* const { reset } = useQueryErrorResetBoundary()
|
|
35
|
+
* const [error, resetError] = useErrorBoundary(() => reset())
|
|
36
|
+
*
|
|
37
|
+
* if (error) {
|
|
38
|
+
* return (
|
|
39
|
+
* <div>
|
|
40
|
+
* There was an error!
|
|
41
|
+
* <button onClick={() => resetError()}>Try again</button>
|
|
42
|
+
* </div>
|
|
43
|
+
* )
|
|
44
|
+
* }
|
|
45
|
+
*
|
|
46
|
+
* return children
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
21
50
|
const useQueryErrorResetBoundary = () => (0, preact_hooks.useContext)(QueryErrorResetBoundaryContext);
|
|
51
|
+
/**
|
|
52
|
+
* When using `suspense` or `throwOnError` in your queries, you need a way to let queries know that you want to
|
|
53
|
+
* try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can
|
|
54
|
+
* reset any query errors within the boundaries of the component.
|
|
55
|
+
*
|
|
56
|
+
* @returns The `children`, rendered as-is, or called with the boundary's {@link QueryErrorResetBoundaryValue}
|
|
57
|
+
* if `children` is a function.
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* ```tsx
|
|
61
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
62
|
+
* import type { ComponentChildren } from 'preact'
|
|
63
|
+
* import { QueryErrorResetBoundary } from '@tanstack/preact-query'
|
|
64
|
+
*
|
|
65
|
+
* function ErrorBoundary({
|
|
66
|
+
* children,
|
|
67
|
+
* reset,
|
|
68
|
+
* }: {
|
|
69
|
+
* children: ComponentChildren
|
|
70
|
+
* reset: () => void
|
|
71
|
+
* }) {
|
|
72
|
+
* const [error, resetError] = useErrorBoundary(() => reset())
|
|
73
|
+
*
|
|
74
|
+
* if (error) {
|
|
75
|
+
* return (
|
|
76
|
+
* <div>
|
|
77
|
+
* There was an error!
|
|
78
|
+
* <button onClick={() => resetError()}>Try again</button>
|
|
79
|
+
* </div>
|
|
80
|
+
* )
|
|
81
|
+
* }
|
|
82
|
+
*
|
|
83
|
+
* return children
|
|
84
|
+
* }
|
|
85
|
+
*
|
|
86
|
+
* const App = () => (
|
|
87
|
+
* <QueryErrorResetBoundary>
|
|
88
|
+
* {({ reset }) => (
|
|
89
|
+
* <ErrorBoundary reset={reset}>
|
|
90
|
+
* <Page />
|
|
91
|
+
* </ErrorBoundary>
|
|
92
|
+
* )}
|
|
93
|
+
* </QueryErrorResetBoundary>
|
|
94
|
+
* )
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
22
97
|
const QueryErrorResetBoundary = ({ children }) => {
|
|
23
98
|
const [value] = (0, preact_hooks.useState)(() => createValue());
|
|
24
99
|
return /* @__PURE__ */ (0, preact_jsx_runtime.jsx)(QueryErrorResetBoundaryContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryErrorResetBoundary.cjs","names":["createContext","useContext","useState"],"sources":["../../src/QueryErrorResetBoundary.tsx"],"sourcesContent":["import { createContext } from 'preact'\nimport type { ComponentChildren } from 'preact'\nimport { useContext, useState } from 'preact/hooks'\n\n// CONTEXT\nexport type QueryErrorResetFunction = () => void\nexport type QueryErrorIsResetFunction = () => boolean\nexport type QueryErrorClearResetFunction = () => void\n\nexport interface QueryErrorResetBoundaryValue {\n clearReset: QueryErrorClearResetFunction\n isReset: QueryErrorIsResetFunction\n reset: QueryErrorResetFunction\n}\n\nfunction createValue(): QueryErrorResetBoundaryValue {\n let isReset = false\n return {\n clearReset: () => {\n isReset = false\n },\n reset: () => {\n isReset = true\n },\n isReset: () => {\n return isReset\n },\n }\n}\n\nconst QueryErrorResetBoundaryContext = createContext(createValue())\n\n// HOOK\n\nexport const useQueryErrorResetBoundary = () =>\n useContext(QueryErrorResetBoundaryContext)\n\n// COMPONENT\n\nexport type QueryErrorResetBoundaryFunction = (\n value: QueryErrorResetBoundaryValue,\n) => ComponentChildren\n\nexport interface QueryErrorResetBoundaryProps {\n children: QueryErrorResetBoundaryFunction | ComponentChildren\n}\n\nexport const QueryErrorResetBoundary = ({\n children,\n}: QueryErrorResetBoundaryProps) => {\n const [value] = useState(() => createValue())\n return (\n <QueryErrorResetBoundaryContext.Provider value={value}>\n {typeof children === 'function' ? children(value) : children}\n </QueryErrorResetBoundaryContext.Provider>\n )\n}\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"QueryErrorResetBoundary.cjs","names":["createContext","useContext","useState"],"sources":["../../src/QueryErrorResetBoundary.tsx"],"sourcesContent":["import { createContext } from 'preact'\nimport type { ComponentChildren } from 'preact'\nimport { useContext, useState } from 'preact/hooks'\n\n// CONTEXT\n\n/**\n * Resets any query errors within the boundary, so queries know they can try again.\n */\nexport type QueryErrorResetFunction = () => void\n\n/**\n * Returns whether the boundary has been reset and not yet cleared.\n */\nexport type QueryErrorIsResetFunction = () => boolean\n\n/**\n * Clears the reset state, so queries know not to try again until the boundary is reset again.\n */\nexport type QueryErrorClearResetFunction = () => void\n\nexport interface QueryErrorResetBoundaryValue {\n /**\n * Clears the reset state, so queries know not to try again until the boundary is reset again.\n */\n clearReset: QueryErrorClearResetFunction\n /**\n * Returns whether the boundary has been reset and not yet cleared.\n */\n isReset: QueryErrorIsResetFunction\n /**\n * Resets any query errors within the boundary, so queries know they can try again.\n */\n reset: QueryErrorResetFunction\n}\n\nfunction createValue(): QueryErrorResetBoundaryValue {\n let isReset = false\n return {\n clearReset: () => {\n isReset = false\n },\n reset: () => {\n isReset = true\n },\n isReset: () => {\n return isReset\n },\n }\n}\n\nconst QueryErrorResetBoundaryContext = createContext(createValue())\n\n// HOOK\n\n/**\n * This hook will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary\n * defined it will reset them globally.\n *\n * @returns The boundary's {@link QueryErrorResetBoundaryValue}.\n *\n * @example\n * ```tsx\n * import { useErrorBoundary } from 'preact/hooks'\n * import type { ComponentChildren } from 'preact'\n * import { useQueryErrorResetBoundary } from '@tanstack/preact-query'\n *\n * function App({ children }: { children: ComponentChildren }) {\n * const { reset } = useQueryErrorResetBoundary()\n * const [error, resetError] = useErrorBoundary(() => reset())\n *\n * if (error) {\n * return (\n * <div>\n * There was an error!\n * <button onClick={() => resetError()}>Try again</button>\n * </div>\n * )\n * }\n *\n * return children\n * }\n * ```\n */\nexport const useQueryErrorResetBoundary = () =>\n useContext(QueryErrorResetBoundaryContext)\n\n// COMPONENT\n\n/**\n * A render-prop function usable as `children` on `QueryErrorResetBoundary`.\n *\n * @param value - The boundary's {@link QueryErrorResetBoundaryValue}.\n * @returns The children to render.\n */\nexport type QueryErrorResetBoundaryFunction = (\n value: QueryErrorResetBoundaryValue,\n) => ComponentChildren\n\n/**\n * The props accepted by `QueryErrorResetBoundary`.\n */\nexport interface QueryErrorResetBoundaryProps {\n /**\n * Either a plain node, or a function that receives the boundary's {@link QueryErrorResetBoundaryValue} and\n * returns a node.\n */\n children: QueryErrorResetBoundaryFunction | ComponentChildren\n}\n\n/**\n * When using `suspense` or `throwOnError` in your queries, you need a way to let queries know that you want to\n * try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can\n * reset any query errors within the boundaries of the component.\n *\n * @returns The `children`, rendered as-is, or called with the boundary's {@link QueryErrorResetBoundaryValue}\n * if `children` is a function.\n *\n * @example\n * ```tsx\n * import { useErrorBoundary } from 'preact/hooks'\n * import type { ComponentChildren } from 'preact'\n * import { QueryErrorResetBoundary } from '@tanstack/preact-query'\n *\n * function ErrorBoundary({\n * children,\n * reset,\n * }: {\n * children: ComponentChildren\n * reset: () => void\n * }) {\n * const [error, resetError] = useErrorBoundary(() => reset())\n *\n * if (error) {\n * return (\n * <div>\n * There was an error!\n * <button onClick={() => resetError()}>Try again</button>\n * </div>\n * )\n * }\n *\n * return children\n * }\n *\n * const App = () => (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary reset={reset}>\n * <Page />\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * ```\n */\nexport const QueryErrorResetBoundary = ({\n children,\n}: QueryErrorResetBoundaryProps) => {\n const [value] = useState(() => createValue())\n return (\n <QueryErrorResetBoundaryContext.Provider value={value}>\n {typeof children === 'function' ? children(value) : children}\n </QueryErrorResetBoundaryContext.Provider>\n )\n}\n"],"mappings":";;;;;AAoCA,SAAS,cAA4C;CACnD,IAAI,UAAU;CACd,OAAO;EACL,kBAAkB;GAChB,UAAU;EACZ;EACA,aAAa;GACX,UAAU;EACZ;EACA,eAAe;GACb,OAAO;EACT;CACF;AACF;AAEA,MAAM,kCAAA,GAAiCA,OAAAA,cAAAA,CAAc,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiClE,MAAa,oCAAA,GACXC,aAAAA,WAAAA,CAAW,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuE3C,MAAa,2BAA2B,EACtC,eACkC;CAClC,MAAM,CAAC,UAAA,GAASC,aAAAA,SAAAA,OAAe,YAAY,CAAC;CAC5C,OACE,iBAAA,GAAA,mBAAA,IAAA,CAAC,+BAA+B,UAAhC;EAAgD;EAC7C,UAAA,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CACb,CAAA;AAE7C"}
|