@tanstack/react-query 5.102.8 → 5.103.0
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 +44 -1
- 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 +44 -1
- 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 +76 -0
- package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.cts +77 -0
- package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.ts +77 -0
- package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.js +76 -0
- package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
- package/build/legacy/infiniteQueryOptions.cjs.map +1 -1
- package/build/legacy/infiniteQueryOptions.d.cts +173 -0
- package/build/legacy/infiniteQueryOptions.d.cts.map +1 -1
- package/build/legacy/infiniteQueryOptions.d.ts +173 -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 +55 -0
- package/build/legacy/mutationOptions.d.cts.map +1 -1
- package/build/legacy/mutationOptions.d.ts +55 -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 +175 -0
- package/build/legacy/queryOptions.d.cts.map +1 -1
- package/build/legacy/queryOptions.d.ts +175 -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 +292 -0
- package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useInfiniteQuery.d.ts +292 -0
- package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useInfiniteQuery.js.map +1 -1
- package/build/legacy/useIsFetching.cjs +36 -0
- package/build/legacy/useIsFetching.cjs.map +1 -1
- package/build/legacy/useIsFetching.d.cts +36 -0
- package/build/legacy/useIsFetching.d.cts.map +1 -1
- package/build/legacy/useIsFetching.d.ts +36 -0
- package/build/legacy/useIsFetching.d.ts.map +1 -1
- package/build/legacy/useIsFetching.js +36 -0
- package/build/legacy/useIsFetching.js.map +1 -1
- package/build/legacy/useMutation.cjs +172 -0
- package/build/legacy/useMutation.cjs.map +1 -1
- package/build/legacy/useMutation.d.cts +172 -0
- package/build/legacy/useMutation.d.cts.map +1 -1
- package/build/legacy/useMutation.d.ts +172 -0
- package/build/legacy/useMutation.d.ts.map +1 -1
- package/build/legacy/useMutation.js +172 -0
- package/build/legacy/useMutation.js.map +1 -1
- package/build/legacy/useMutationState.cjs +94 -0
- package/build/legacy/useMutationState.cjs.map +1 -1
- package/build/legacy/useMutationState.d.cts +94 -0
- package/build/legacy/useMutationState.d.cts.map +1 -1
- package/build/legacy/useMutationState.d.ts +94 -0
- package/build/legacy/useMutationState.d.ts.map +1 -1
- package/build/legacy/useMutationState.js +94 -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 +130 -0
- package/build/legacy/useQueries.cjs.map +1 -1
- package/build/legacy/useQueries.d.cts +165 -2
- package/build/legacy/useQueries.d.cts.map +1 -1
- package/build/legacy/useQueries.d.ts +165 -2
- package/build/legacy/useQueries.d.ts.map +1 -1
- package/build/legacy/useQueries.js +130 -0
- package/build/legacy/useQueries.js.map +1 -1
- package/build/legacy/useQuery.cjs.map +1 -1
- package/build/legacy/useQuery.d.cts +246 -0
- package/build/legacy/useQuery.d.cts.map +1 -1
- package/build/legacy/useQuery.d.ts +246 -0
- package/build/legacy/useQuery.d.ts.map +1 -1
- package/build/legacy/useQuery.js.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.cjs +86 -0
- package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.cts +86 -0
- package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.ts +86 -0
- package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.js +86 -0
- package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/legacy/useSuspenseQueries.cjs.map +1 -1
- package/build/legacy/useSuspenseQueries.d.cts +320 -2
- package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
- package/build/legacy/useSuspenseQueries.d.ts +320 -2
- package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
- package/build/legacy/useSuspenseQueries.js.map +1 -1
- package/build/legacy/useSuspenseQuery.cjs +67 -0
- package/build/legacy/useSuspenseQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseQuery.d.cts +67 -0
- package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseQuery.d.ts +67 -0
- package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseQuery.js +67 -0
- package/build/legacy/useSuspenseQuery.js.map +1 -1
- package/build/modern/HydrationBoundary.cjs +44 -1
- 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 +44 -1
- 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 +76 -0
- package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.cts +77 -0
- package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.ts +77 -0
- package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.js +76 -0
- package/build/modern/QueryErrorResetBoundary.js.map +1 -1
- package/build/modern/infiniteQueryOptions.cjs.map +1 -1
- package/build/modern/infiniteQueryOptions.d.cts +173 -0
- package/build/modern/infiniteQueryOptions.d.cts.map +1 -1
- package/build/modern/infiniteQueryOptions.d.ts +173 -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 +55 -0
- package/build/modern/mutationOptions.d.cts.map +1 -1
- package/build/modern/mutationOptions.d.ts +55 -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 +175 -0
- package/build/modern/queryOptions.d.cts.map +1 -1
- package/build/modern/queryOptions.d.ts +175 -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 +292 -0
- package/build/modern/useInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useInfiniteQuery.d.ts +292 -0
- package/build/modern/useInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useInfiniteQuery.js.map +1 -1
- package/build/modern/useIsFetching.cjs +36 -0
- package/build/modern/useIsFetching.cjs.map +1 -1
- package/build/modern/useIsFetching.d.cts +36 -0
- package/build/modern/useIsFetching.d.cts.map +1 -1
- package/build/modern/useIsFetching.d.ts +36 -0
- package/build/modern/useIsFetching.d.ts.map +1 -1
- package/build/modern/useIsFetching.js +36 -0
- package/build/modern/useIsFetching.js.map +1 -1
- package/build/modern/useMutation.cjs +172 -0
- package/build/modern/useMutation.cjs.map +1 -1
- package/build/modern/useMutation.d.cts +172 -0
- package/build/modern/useMutation.d.cts.map +1 -1
- package/build/modern/useMutation.d.ts +172 -0
- package/build/modern/useMutation.d.ts.map +1 -1
- package/build/modern/useMutation.js +172 -0
- package/build/modern/useMutation.js.map +1 -1
- package/build/modern/useMutationState.cjs +94 -0
- package/build/modern/useMutationState.cjs.map +1 -1
- package/build/modern/useMutationState.d.cts +94 -0
- package/build/modern/useMutationState.d.cts.map +1 -1
- package/build/modern/useMutationState.d.ts +94 -0
- package/build/modern/useMutationState.d.ts.map +1 -1
- package/build/modern/useMutationState.js +94 -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 +130 -0
- package/build/modern/useQueries.cjs.map +1 -1
- package/build/modern/useQueries.d.cts +165 -2
- package/build/modern/useQueries.d.cts.map +1 -1
- package/build/modern/useQueries.d.ts +165 -2
- package/build/modern/useQueries.d.ts.map +1 -1
- package/build/modern/useQueries.js +130 -0
- package/build/modern/useQueries.js.map +1 -1
- package/build/modern/useQuery.cjs.map +1 -1
- package/build/modern/useQuery.d.cts +246 -0
- package/build/modern/useQuery.d.cts.map +1 -1
- package/build/modern/useQuery.d.ts +246 -0
- package/build/modern/useQuery.d.ts.map +1 -1
- package/build/modern/useQuery.js.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.cjs +86 -0
- package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.cts +86 -0
- package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.ts +86 -0
- package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.js +86 -0
- package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/modern/useSuspenseQueries.cjs.map +1 -1
- package/build/modern/useSuspenseQueries.d.cts +320 -2
- package/build/modern/useSuspenseQueries.d.cts.map +1 -1
- package/build/modern/useSuspenseQueries.d.ts +320 -2
- package/build/modern/useSuspenseQueries.d.ts.map +1 -1
- package/build/modern/useSuspenseQueries.js.map +1 -1
- package/build/modern/useSuspenseQuery.cjs +67 -0
- package/build/modern/useSuspenseQuery.cjs.map +1 -1
- package/build/modern/useSuspenseQuery.d.cts +67 -0
- package/build/modern/useSuspenseQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseQuery.d.ts +67 -0
- package/build/modern/useSuspenseQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseQuery.js +67 -0
- package/build/modern/useSuspenseQuery.js.map +1 -1
- package/build/query-codemods/eslint.config.js +7 -0
- package/build/query-codemods/root.eslint.config.js +45 -0
- package/package.json +11 -11
- package/src/HydrationBoundary.tsx +61 -1
- package/src/IsRestoringProvider.ts +12 -0
- package/src/QueryClientProvider.tsx +41 -0
- package/src/QueryErrorResetBoundary.tsx +89 -0
- package/src/infiniteQueryOptions.ts +173 -0
- package/src/mutationOptions.ts +55 -0
- package/src/queryOptions.ts +175 -0
- package/src/types.ts +228 -2
- package/src/useInfiniteQuery.ts +292 -0
- package/src/useIsFetching.ts +36 -0
- package/src/useMutation.ts +172 -0
- package/src/useMutationState.ts +94 -0
- package/src/usePrefetchInfiniteQuery.tsx +44 -0
- package/src/usePrefetchQuery.tsx +35 -0
- package/src/useQueries.ts +165 -2
- package/src/useQuery.ts +246 -0
- package/src/useSuspenseInfiniteQuery.ts +86 -0
- package/src/useSuspenseQueries.ts +320 -2
- package/src/useSuspenseQuery.ts +67 -0
|
@@ -2,8 +2,300 @@ import { DefinedUseInfiniteQueryResult, UseInfiniteQueryOptions, UseInfiniteQuer
|
|
|
2
2
|
import { DefinedInitialDataInfiniteOptions, UndefinedInitialDataInfiniteOptions } from "./infiniteQueryOptions.cjs";
|
|
3
3
|
import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/query-core";
|
|
4
4
|
//#region src/useInfiniteQuery.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
|
7
|
+
* `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
|
8
|
+
*
|
|
9
|
+
* This overload is selected when `initialData` is set.
|
|
10
|
+
*
|
|
11
|
+
* @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
|
12
|
+
* refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
|
13
|
+
* actions, or add conditions like `hasNextPage && !isFetching`.
|
|
14
|
+
* @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
|
|
15
|
+
* @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.
|
|
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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
|
19
|
+
* `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
|
|
20
|
+
* `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
|
21
|
+
* `InfiniteData<TQueryFnData>` shape.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
26
|
+
*
|
|
27
|
+
* function Projects() {
|
|
28
|
+
* // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
|
|
29
|
+
* // list stays visible alongside the error.
|
|
30
|
+
* const { data, isError, error } = useInfiniteQuery({
|
|
31
|
+
* queryKey: ['projects'],
|
|
32
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
33
|
+
* initialPageParam: 0,
|
|
34
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
35
|
+
* initialData: { pages: [], pageParams: [] },
|
|
36
|
+
* })
|
|
37
|
+
*
|
|
38
|
+
* return (
|
|
39
|
+
* <div>
|
|
40
|
+
* {isError ? <span>Error: {error.message}</span> : null}
|
|
41
|
+
* <ul>
|
|
42
|
+
* {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}
|
|
43
|
+
* </ul>
|
|
44
|
+
* </div>
|
|
45
|
+
* )
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
5
49
|
declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): DefinedUseInfiniteQueryResult<TData, TError>;
|
|
50
|
+
/**
|
|
51
|
+
* The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
|
52
|
+
* `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
|
53
|
+
*
|
|
54
|
+
* @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
|
55
|
+
* refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
|
56
|
+
* actions, or add conditions like `hasNextPage && !isFetching`.
|
|
57
|
+
* @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
|
|
58
|
+
* @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.
|
|
59
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
60
|
+
* be used.
|
|
61
|
+
* @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
|
62
|
+
* `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
|
|
63
|
+
* `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
|
64
|
+
* `InfiniteData<TQueryFnData>` shape.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* Fetching the next page from a "Load More" button click:
|
|
68
|
+
* ```tsx
|
|
69
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
70
|
+
*
|
|
71
|
+
* function Projects() {
|
|
72
|
+
* const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
|
|
73
|
+
* useInfiniteQuery({
|
|
74
|
+
* queryKey: ['projects'],
|
|
75
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
76
|
+
* initialPageParam: 0,
|
|
77
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
78
|
+
* })
|
|
79
|
+
*
|
|
80
|
+
* if (isPending) return 'Loading...'
|
|
81
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
82
|
+
*
|
|
83
|
+
* return (
|
|
84
|
+
* <>
|
|
85
|
+
* <ul>
|
|
86
|
+
* {data.pages.map((page) =>
|
|
87
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
88
|
+
* )}
|
|
89
|
+
* </ul>
|
|
90
|
+
* <button
|
|
91
|
+
* onClick={() => fetchNextPage()}
|
|
92
|
+
* disabled={!hasNextPage || isFetching}
|
|
93
|
+
* >
|
|
94
|
+
* {isFetchingNextPage
|
|
95
|
+
* ? 'Loading more...'
|
|
96
|
+
* : hasNextPage
|
|
97
|
+
* ? 'Load More'
|
|
98
|
+
* : 'Nothing more to load'}
|
|
99
|
+
* </button>
|
|
100
|
+
* </>
|
|
101
|
+
* )
|
|
102
|
+
* }
|
|
103
|
+
* ```
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
|
|
107
|
+
* sentinel element after the list:
|
|
108
|
+
* ```tsx
|
|
109
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
110
|
+
* import { useEffect, useRef } from 'react'
|
|
111
|
+
*
|
|
112
|
+
* function Projects() {
|
|
113
|
+
* const {
|
|
114
|
+
* data,
|
|
115
|
+
* isPending,
|
|
116
|
+
* isError,
|
|
117
|
+
* error,
|
|
118
|
+
* fetchNextPage,
|
|
119
|
+
* hasNextPage,
|
|
120
|
+
* isFetching,
|
|
121
|
+
* isFetchingNextPage,
|
|
122
|
+
* } = useInfiniteQuery({
|
|
123
|
+
* queryKey: ['projects'],
|
|
124
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
125
|
+
* initialPageParam: 0,
|
|
126
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
127
|
+
* })
|
|
128
|
+
*
|
|
129
|
+
* const sentinelRef = useRef<HTMLDivElement>(null)
|
|
130
|
+
*
|
|
131
|
+
* useEffect(() => {
|
|
132
|
+
* const sentinel = sentinelRef.current
|
|
133
|
+
* if (sentinel == null || !hasNextPage || isFetching) return
|
|
134
|
+
*
|
|
135
|
+
* const observer = new IntersectionObserver(([entry]) => {
|
|
136
|
+
* if (entry?.isIntersecting) fetchNextPage()
|
|
137
|
+
* })
|
|
138
|
+
* observer.observe(sentinel)
|
|
139
|
+
*
|
|
140
|
+
* return () => observer.disconnect()
|
|
141
|
+
* }, [hasNextPage, isFetching, fetchNextPage])
|
|
142
|
+
*
|
|
143
|
+
* if (isPending) return 'Loading...'
|
|
144
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
145
|
+
*
|
|
146
|
+
* return (
|
|
147
|
+
* <>
|
|
148
|
+
* <ul>
|
|
149
|
+
* {data.pages.map((page) =>
|
|
150
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
151
|
+
* )}
|
|
152
|
+
* </ul>
|
|
153
|
+
* <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
|
|
154
|
+
* </>
|
|
155
|
+
* )
|
|
156
|
+
* }
|
|
157
|
+
* ```
|
|
158
|
+
*/
|
|
6
159
|
declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
|
|
160
|
+
/**
|
|
161
|
+
* The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
|
162
|
+
* `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
|
163
|
+
*
|
|
164
|
+
* @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
|
165
|
+
* refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
|
166
|
+
* actions, or add conditions like `hasNextPage && !isFetching`.
|
|
167
|
+
* @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
|
|
168
|
+
* @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.
|
|
169
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
170
|
+
* be used.
|
|
171
|
+
* @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
|
172
|
+
* `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
|
|
173
|
+
* `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
|
174
|
+
* `InfiniteData<TQueryFnData>` shape.
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* Fetching the next page from a "Load More" button click:
|
|
178
|
+
* ```tsx
|
|
179
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
180
|
+
*
|
|
181
|
+
* function Projects() {
|
|
182
|
+
* const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
|
|
183
|
+
* useInfiniteQuery({
|
|
184
|
+
* queryKey: ['projects'],
|
|
185
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
186
|
+
* initialPageParam: 0,
|
|
187
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
188
|
+
* })
|
|
189
|
+
*
|
|
190
|
+
* if (isPending) return 'Loading...'
|
|
191
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
192
|
+
*
|
|
193
|
+
* return (
|
|
194
|
+
* <>
|
|
195
|
+
* <ul>
|
|
196
|
+
* {data.pages.map((page) =>
|
|
197
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
198
|
+
* )}
|
|
199
|
+
* </ul>
|
|
200
|
+
* <button
|
|
201
|
+
* onClick={() => fetchNextPage()}
|
|
202
|
+
* disabled={!hasNextPage || isFetching}
|
|
203
|
+
* >
|
|
204
|
+
* {isFetchingNextPage
|
|
205
|
+
* ? 'Loading more...'
|
|
206
|
+
* : hasNextPage
|
|
207
|
+
* ? 'Load More'
|
|
208
|
+
* : 'Nothing more to load'}
|
|
209
|
+
* </button>
|
|
210
|
+
* </>
|
|
211
|
+
* )
|
|
212
|
+
* }
|
|
213
|
+
* ```
|
|
214
|
+
*
|
|
215
|
+
* @example
|
|
216
|
+
* Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
|
|
217
|
+
* sentinel element after the list:
|
|
218
|
+
* ```tsx
|
|
219
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
220
|
+
* import { useEffect, useRef } from 'react'
|
|
221
|
+
*
|
|
222
|
+
* function Projects() {
|
|
223
|
+
* const {
|
|
224
|
+
* data,
|
|
225
|
+
* isPending,
|
|
226
|
+
* isError,
|
|
227
|
+
* error,
|
|
228
|
+
* fetchNextPage,
|
|
229
|
+
* hasNextPage,
|
|
230
|
+
* isFetching,
|
|
231
|
+
* isFetchingNextPage,
|
|
232
|
+
* } = useInfiniteQuery({
|
|
233
|
+
* queryKey: ['projects'],
|
|
234
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
235
|
+
* initialPageParam: 0,
|
|
236
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
237
|
+
* })
|
|
238
|
+
*
|
|
239
|
+
* const sentinelRef = useRef<HTMLDivElement>(null)
|
|
240
|
+
*
|
|
241
|
+
* useEffect(() => {
|
|
242
|
+
* const sentinel = sentinelRef.current
|
|
243
|
+
* if (sentinel == null || !hasNextPage || isFetching) return
|
|
244
|
+
*
|
|
245
|
+
* const observer = new IntersectionObserver(([entry]) => {
|
|
246
|
+
* if (entry?.isIntersecting) fetchNextPage()
|
|
247
|
+
* })
|
|
248
|
+
* observer.observe(sentinel)
|
|
249
|
+
*
|
|
250
|
+
* return () => observer.disconnect()
|
|
251
|
+
* }, [hasNextPage, isFetching, fetchNextPage])
|
|
252
|
+
*
|
|
253
|
+
* if (isPending) return 'Loading...'
|
|
254
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
255
|
+
*
|
|
256
|
+
* return (
|
|
257
|
+
* <>
|
|
258
|
+
* <ul>
|
|
259
|
+
* {data.pages.map((page) =>
|
|
260
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
261
|
+
* )}
|
|
262
|
+
* </ul>
|
|
263
|
+
* <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
|
|
264
|
+
* </>
|
|
265
|
+
* )
|
|
266
|
+
* }
|
|
267
|
+
* ```
|
|
268
|
+
*
|
|
269
|
+
* @example
|
|
270
|
+
* A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn`
|
|
271
|
+
* instead of setting `enabled: false`:
|
|
272
|
+
* ```tsx
|
|
273
|
+
* import { skipToken, useInfiniteQuery } from '@tanstack/react-query'
|
|
274
|
+
*
|
|
275
|
+
* function Comments({ postId }: { postId: string | undefined }) {
|
|
276
|
+
* // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.
|
|
277
|
+
* const { data, isLoading, isError, error } = useInfiniteQuery({
|
|
278
|
+
* queryKey: ['post', postId, 'comments'],
|
|
279
|
+
* queryFn:
|
|
280
|
+
* postId != null
|
|
281
|
+
* ? ({ pageParam }) => fetchComments(postId, pageParam)
|
|
282
|
+
* : skipToken,
|
|
283
|
+
* initialPageParam: 0,
|
|
284
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
285
|
+
* })
|
|
286
|
+
*
|
|
287
|
+
* if (postId == null) return 'Select a post'
|
|
288
|
+
* if (isLoading) return 'Loading...'
|
|
289
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
290
|
+
*
|
|
291
|
+
* return (
|
|
292
|
+
* <ul>
|
|
293
|
+
* {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
|
|
294
|
+
* </ul>
|
|
295
|
+
* )
|
|
296
|
+
* }
|
|
297
|
+
* ```
|
|
298
|
+
*/
|
|
7
299
|
declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
|
|
8
300
|
//#endregion
|
|
9
301
|
export { useInfiniteQuery };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInfiniteQuery.d.cts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInfiniteQuery.d.cts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgEgB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,kCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,8BAA8B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+GxB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,oCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6IjB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,wBACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO"}
|
|
@@ -2,8 +2,300 @@ import { DefinedUseInfiniteQueryResult, UseInfiniteQueryOptions, UseInfiniteQuer
|
|
|
2
2
|
import { DefinedInitialDataInfiniteOptions, UndefinedInitialDataInfiniteOptions } from "./infiniteQueryOptions.js";
|
|
3
3
|
import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/query-core";
|
|
4
4
|
//#region src/useInfiniteQuery.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
|
7
|
+
* `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
|
8
|
+
*
|
|
9
|
+
* This overload is selected when `initialData` is set.
|
|
10
|
+
*
|
|
11
|
+
* @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
|
12
|
+
* refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
|
13
|
+
* actions, or add conditions like `hasNextPage && !isFetching`.
|
|
14
|
+
* @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
|
|
15
|
+
* @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.
|
|
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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
|
19
|
+
* `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
|
|
20
|
+
* `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
|
21
|
+
* `InfiniteData<TQueryFnData>` shape.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
26
|
+
*
|
|
27
|
+
* function Projects() {
|
|
28
|
+
* // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
|
|
29
|
+
* // list stays visible alongside the error.
|
|
30
|
+
* const { data, isError, error } = useInfiniteQuery({
|
|
31
|
+
* queryKey: ['projects'],
|
|
32
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
33
|
+
* initialPageParam: 0,
|
|
34
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
35
|
+
* initialData: { pages: [], pageParams: [] },
|
|
36
|
+
* })
|
|
37
|
+
*
|
|
38
|
+
* return (
|
|
39
|
+
* <div>
|
|
40
|
+
* {isError ? <span>Error: {error.message}</span> : null}
|
|
41
|
+
* <ul>
|
|
42
|
+
* {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}
|
|
43
|
+
* </ul>
|
|
44
|
+
* </div>
|
|
45
|
+
* )
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
5
49
|
declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): DefinedUseInfiniteQueryResult<TData, TError>;
|
|
50
|
+
/**
|
|
51
|
+
* The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
|
52
|
+
* `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
|
53
|
+
*
|
|
54
|
+
* @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
|
55
|
+
* refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
|
56
|
+
* actions, or add conditions like `hasNextPage && !isFetching`.
|
|
57
|
+
* @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
|
|
58
|
+
* @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.
|
|
59
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
60
|
+
* be used.
|
|
61
|
+
* @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
|
62
|
+
* `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
|
|
63
|
+
* `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
|
64
|
+
* `InfiniteData<TQueryFnData>` shape.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* Fetching the next page from a "Load More" button click:
|
|
68
|
+
* ```tsx
|
|
69
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
70
|
+
*
|
|
71
|
+
* function Projects() {
|
|
72
|
+
* const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
|
|
73
|
+
* useInfiniteQuery({
|
|
74
|
+
* queryKey: ['projects'],
|
|
75
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
76
|
+
* initialPageParam: 0,
|
|
77
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
78
|
+
* })
|
|
79
|
+
*
|
|
80
|
+
* if (isPending) return 'Loading...'
|
|
81
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
82
|
+
*
|
|
83
|
+
* return (
|
|
84
|
+
* <>
|
|
85
|
+
* <ul>
|
|
86
|
+
* {data.pages.map((page) =>
|
|
87
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
88
|
+
* )}
|
|
89
|
+
* </ul>
|
|
90
|
+
* <button
|
|
91
|
+
* onClick={() => fetchNextPage()}
|
|
92
|
+
* disabled={!hasNextPage || isFetching}
|
|
93
|
+
* >
|
|
94
|
+
* {isFetchingNextPage
|
|
95
|
+
* ? 'Loading more...'
|
|
96
|
+
* : hasNextPage
|
|
97
|
+
* ? 'Load More'
|
|
98
|
+
* : 'Nothing more to load'}
|
|
99
|
+
* </button>
|
|
100
|
+
* </>
|
|
101
|
+
* )
|
|
102
|
+
* }
|
|
103
|
+
* ```
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
|
|
107
|
+
* sentinel element after the list:
|
|
108
|
+
* ```tsx
|
|
109
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
110
|
+
* import { useEffect, useRef } from 'react'
|
|
111
|
+
*
|
|
112
|
+
* function Projects() {
|
|
113
|
+
* const {
|
|
114
|
+
* data,
|
|
115
|
+
* isPending,
|
|
116
|
+
* isError,
|
|
117
|
+
* error,
|
|
118
|
+
* fetchNextPage,
|
|
119
|
+
* hasNextPage,
|
|
120
|
+
* isFetching,
|
|
121
|
+
* isFetchingNextPage,
|
|
122
|
+
* } = useInfiniteQuery({
|
|
123
|
+
* queryKey: ['projects'],
|
|
124
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
125
|
+
* initialPageParam: 0,
|
|
126
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
127
|
+
* })
|
|
128
|
+
*
|
|
129
|
+
* const sentinelRef = useRef<HTMLDivElement>(null)
|
|
130
|
+
*
|
|
131
|
+
* useEffect(() => {
|
|
132
|
+
* const sentinel = sentinelRef.current
|
|
133
|
+
* if (sentinel == null || !hasNextPage || isFetching) return
|
|
134
|
+
*
|
|
135
|
+
* const observer = new IntersectionObserver(([entry]) => {
|
|
136
|
+
* if (entry?.isIntersecting) fetchNextPage()
|
|
137
|
+
* })
|
|
138
|
+
* observer.observe(sentinel)
|
|
139
|
+
*
|
|
140
|
+
* return () => observer.disconnect()
|
|
141
|
+
* }, [hasNextPage, isFetching, fetchNextPage])
|
|
142
|
+
*
|
|
143
|
+
* if (isPending) return 'Loading...'
|
|
144
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
145
|
+
*
|
|
146
|
+
* return (
|
|
147
|
+
* <>
|
|
148
|
+
* <ul>
|
|
149
|
+
* {data.pages.map((page) =>
|
|
150
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
151
|
+
* )}
|
|
152
|
+
* </ul>
|
|
153
|
+
* <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
|
|
154
|
+
* </>
|
|
155
|
+
* )
|
|
156
|
+
* }
|
|
157
|
+
* ```
|
|
158
|
+
*/
|
|
6
159
|
declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
|
|
160
|
+
/**
|
|
161
|
+
* The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
|
162
|
+
* `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
|
163
|
+
*
|
|
164
|
+
* @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
|
165
|
+
* refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
|
166
|
+
* actions, or add conditions like `hasNextPage && !isFetching`.
|
|
167
|
+
* @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
|
|
168
|
+
* @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.
|
|
169
|
+
* @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
|
|
170
|
+
* be used.
|
|
171
|
+
* @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
|
172
|
+
* `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
|
|
173
|
+
* `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
|
174
|
+
* `InfiniteData<TQueryFnData>` shape.
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* Fetching the next page from a "Load More" button click:
|
|
178
|
+
* ```tsx
|
|
179
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
180
|
+
*
|
|
181
|
+
* function Projects() {
|
|
182
|
+
* const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
|
|
183
|
+
* useInfiniteQuery({
|
|
184
|
+
* queryKey: ['projects'],
|
|
185
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
186
|
+
* initialPageParam: 0,
|
|
187
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
188
|
+
* })
|
|
189
|
+
*
|
|
190
|
+
* if (isPending) return 'Loading...'
|
|
191
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
192
|
+
*
|
|
193
|
+
* return (
|
|
194
|
+
* <>
|
|
195
|
+
* <ul>
|
|
196
|
+
* {data.pages.map((page) =>
|
|
197
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
198
|
+
* )}
|
|
199
|
+
* </ul>
|
|
200
|
+
* <button
|
|
201
|
+
* onClick={() => fetchNextPage()}
|
|
202
|
+
* disabled={!hasNextPage || isFetching}
|
|
203
|
+
* >
|
|
204
|
+
* {isFetchingNextPage
|
|
205
|
+
* ? 'Loading more...'
|
|
206
|
+
* : hasNextPage
|
|
207
|
+
* ? 'Load More'
|
|
208
|
+
* : 'Nothing more to load'}
|
|
209
|
+
* </button>
|
|
210
|
+
* </>
|
|
211
|
+
* )
|
|
212
|
+
* }
|
|
213
|
+
* ```
|
|
214
|
+
*
|
|
215
|
+
* @example
|
|
216
|
+
* Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
|
|
217
|
+
* sentinel element after the list:
|
|
218
|
+
* ```tsx
|
|
219
|
+
* import { useInfiniteQuery } from '@tanstack/react-query'
|
|
220
|
+
* import { useEffect, useRef } from 'react'
|
|
221
|
+
*
|
|
222
|
+
* function Projects() {
|
|
223
|
+
* const {
|
|
224
|
+
* data,
|
|
225
|
+
* isPending,
|
|
226
|
+
* isError,
|
|
227
|
+
* error,
|
|
228
|
+
* fetchNextPage,
|
|
229
|
+
* hasNextPage,
|
|
230
|
+
* isFetching,
|
|
231
|
+
* isFetchingNextPage,
|
|
232
|
+
* } = useInfiniteQuery({
|
|
233
|
+
* queryKey: ['projects'],
|
|
234
|
+
* queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
|
235
|
+
* initialPageParam: 0,
|
|
236
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
237
|
+
* })
|
|
238
|
+
*
|
|
239
|
+
* const sentinelRef = useRef<HTMLDivElement>(null)
|
|
240
|
+
*
|
|
241
|
+
* useEffect(() => {
|
|
242
|
+
* const sentinel = sentinelRef.current
|
|
243
|
+
* if (sentinel == null || !hasNextPage || isFetching) return
|
|
244
|
+
*
|
|
245
|
+
* const observer = new IntersectionObserver(([entry]) => {
|
|
246
|
+
* if (entry?.isIntersecting) fetchNextPage()
|
|
247
|
+
* })
|
|
248
|
+
* observer.observe(sentinel)
|
|
249
|
+
*
|
|
250
|
+
* return () => observer.disconnect()
|
|
251
|
+
* }, [hasNextPage, isFetching, fetchNextPage])
|
|
252
|
+
*
|
|
253
|
+
* if (isPending) return 'Loading...'
|
|
254
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
255
|
+
*
|
|
256
|
+
* return (
|
|
257
|
+
* <>
|
|
258
|
+
* <ul>
|
|
259
|
+
* {data.pages.map((page) =>
|
|
260
|
+
* page.projects.map((project) => <li key={project.id}>{project.name}</li>),
|
|
261
|
+
* )}
|
|
262
|
+
* </ul>
|
|
263
|
+
* <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
|
|
264
|
+
* </>
|
|
265
|
+
* )
|
|
266
|
+
* }
|
|
267
|
+
* ```
|
|
268
|
+
*
|
|
269
|
+
* @example
|
|
270
|
+
* A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn`
|
|
271
|
+
* instead of setting `enabled: false`:
|
|
272
|
+
* ```tsx
|
|
273
|
+
* import { skipToken, useInfiniteQuery } from '@tanstack/react-query'
|
|
274
|
+
*
|
|
275
|
+
* function Comments({ postId }: { postId: string | undefined }) {
|
|
276
|
+
* // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.
|
|
277
|
+
* const { data, isLoading, isError, error } = useInfiniteQuery({
|
|
278
|
+
* queryKey: ['post', postId, 'comments'],
|
|
279
|
+
* queryFn:
|
|
280
|
+
* postId != null
|
|
281
|
+
* ? ({ pageParam }) => fetchComments(postId, pageParam)
|
|
282
|
+
* : skipToken,
|
|
283
|
+
* initialPageParam: 0,
|
|
284
|
+
* getNextPageParam: (lastPage) => lastPage.nextId,
|
|
285
|
+
* })
|
|
286
|
+
*
|
|
287
|
+
* if (postId == null) return 'Select a post'
|
|
288
|
+
* if (isLoading) return 'Loading...'
|
|
289
|
+
* if (isError) return <span>Error: {error.message}</span>
|
|
290
|
+
*
|
|
291
|
+
* return (
|
|
292
|
+
* <ul>
|
|
293
|
+
* {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
|
|
294
|
+
* </ul>
|
|
295
|
+
* )
|
|
296
|
+
* }
|
|
297
|
+
* ```
|
|
298
|
+
*/
|
|
7
299
|
declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
|
|
8
300
|
//#endregion
|
|
9
301
|
export { useInfiniteQuery };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInfiniteQuery.d.ts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInfiniteQuery.d.ts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgEgB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,kCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,8BAA8B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+GxB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,oCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6IjB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,wBACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInfiniteQuery.js","names":[],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["'use client'\nimport { InfiniteQueryObserver } from '@tanstack/query-core'\nimport { useBaseQuery } from './useBaseQuery'\nimport type {\n DefaultError,\n InfiniteData,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\nimport type {\n DefinedUseInfiniteQueryResult,\n UseInfiniteQueryOptions,\n UseInfiniteQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\n\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): DefinedUseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery(\n options: UseInfiniteQueryOptions,\n queryClient?: QueryClient,\n) {\n return useBaseQuery(\n options,\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n )\n}\n"],"mappings":";;;;AAuEA,SAAgB,iBACd,SACA,aACA;CACA,OAAO,aACL,SACA,uBACA,WACF;AACF"}
|
|
1
|
+
{"version":3,"file":"useInfiniteQuery.js","names":[],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["'use client'\nimport { InfiniteQueryObserver } from '@tanstack/query-core'\nimport { useBaseQuery } from './useBaseQuery'\nimport type {\n DefaultError,\n InfiniteData,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\nimport type {\n DefinedUseInfiniteQueryResult,\n UseInfiniteQueryOptions,\n UseInfiniteQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * This overload is selected when `initialData` is set.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/react-query'\n *\n * function Projects() {\n * // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the\n * // list stays visible alongside the error.\n * const { data, isError, error } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * initialData: { pages: [], pageParams: [] },\n * })\n *\n * return (\n * <div>\n * {isError ? <span>Error: {error.message}</span> : null}\n * <ul>\n * {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}\n * </ul>\n * </div>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): DefinedUseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * Fetching the next page from a \"Load More\" button click:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/react-query'\n *\n * function Projects() {\n * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <button\n * onClick={() => fetchNextPage()}\n * disabled={!hasNextPage || isFetching}\n * >\n * {isFetchingNextPage\n * ? 'Loading more...'\n * : hasNextPage\n * ? 'Load More'\n * : 'Nothing more to load'}\n * </button>\n * </>\n * )\n * }\n * ```\n *\n * @example\n * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a\n * sentinel element after the list:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/react-query'\n * import { useEffect, useRef } from 'react'\n *\n * function Projects() {\n * const {\n * data,\n * isPending,\n * isError,\n * error,\n * fetchNextPage,\n * hasNextPage,\n * isFetching,\n * isFetchingNextPage,\n * } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * const sentinelRef = useRef<HTMLDivElement>(null)\n *\n * useEffect(() => {\n * const sentinel = sentinelRef.current\n * if (sentinel == null || !hasNextPage || isFetching) return\n *\n * const observer = new IntersectionObserver(([entry]) => {\n * if (entry?.isIntersecting) fetchNextPage()\n * })\n * observer.observe(sentinel)\n *\n * return () => observer.disconnect()\n * }, [hasNextPage, isFetching, fetchNextPage])\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>\n * </>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * Fetching the next page from a \"Load More\" button click:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/react-query'\n *\n * function Projects() {\n * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <button\n * onClick={() => fetchNextPage()}\n * disabled={!hasNextPage || isFetching}\n * >\n * {isFetchingNextPage\n * ? 'Loading more...'\n * : hasNextPage\n * ? 'Load More'\n * : 'Nothing more to load'}\n * </button>\n * </>\n * )\n * }\n * ```\n *\n * @example\n * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a\n * sentinel element after the list:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/react-query'\n * import { useEffect, useRef } from 'react'\n *\n * function Projects() {\n * const {\n * data,\n * isPending,\n * isError,\n * error,\n * fetchNextPage,\n * hasNextPage,\n * isFetching,\n * isFetchingNextPage,\n * } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * const sentinelRef = useRef<HTMLDivElement>(null)\n *\n * useEffect(() => {\n * const sentinel = sentinelRef.current\n * if (sentinel == null || !hasNextPage || isFetching) return\n *\n * const observer = new IntersectionObserver(([entry]) => {\n * if (entry?.isIntersecting) fetchNextPage()\n * })\n * observer.observe(sentinel)\n *\n * return () => observer.disconnect()\n * }, [hasNextPage, isFetching, fetchNextPage])\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>\n * </>\n * )\n * }\n * ```\n *\n * @example\n * A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn`\n * instead of setting `enabled: false`:\n * ```tsx\n * import { skipToken, useInfiniteQuery } from '@tanstack/react-query'\n *\n * function Comments({ postId }: { postId: string | undefined }) {\n * // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.\n * const { data, isLoading, isError, error } = useInfiniteQuery({\n * queryKey: ['post', postId, 'comments'],\n * queryFn:\n * postId != null\n * ? ({ pageParam }) => fetchComments(postId, pageParam)\n * : skipToken,\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * if (postId == null) return 'Select a post'\n * if (isLoading) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <ul>\n * {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}\n * </ul>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery(\n options: UseInfiniteQueryOptions,\n queryClient?: QueryClient,\n) {\n return useBaseQuery(\n options,\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n )\n}\n"],"mappings":";;;;AA2WA,SAAgB,iBACd,SACA,aACA;CACA,OAAO,aACL,SACA,uBACA,WACF;AACF"}
|