|
| 1 | +--- |
| 2 | +title: useInfiniteQuery |
| 3 | +--- |
| 4 | + |
| 5 | +# {{ $frontmatter.title }} |
| 6 | + |
| 7 | +The `useInfiniteQuery` method allows you to use the original [useInfiniteQuery](https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries) |
| 8 | + |
| 9 | +- The result is the same as the original function. |
| 10 | +- The `queryKey` is `[method, path, params]`. |
| 11 | +- `data` and `error` are fully typed. |
| 12 | +- You can pass infinite query options as fourth parameter. |
| 13 | + |
| 14 | +::: tip |
| 15 | +You can find more information about `useInfiniteQuery` on the [@tanstack/react-query documentation](https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries). |
| 16 | +::: |
| 17 | + |
| 18 | +## Example |
| 19 | + |
| 20 | +::: code-group |
| 21 | + |
| 22 | +```tsx [src/app.tsx] |
| 23 | +import { $api } from "./api"; |
| 24 | +const PostList = () => { |
| 25 | + const { data, fetchNextPage, hasNextPage, isFetching } = |
| 26 | + $api.useInfiniteQuery( |
| 27 | + "get", |
| 28 | + "/posts", |
| 29 | + { |
| 30 | + params: { |
| 31 | + query: { |
| 32 | + limit: 10, |
| 33 | + }, |
| 34 | + }, |
| 35 | + }, |
| 36 | + { |
| 37 | + getNextPageParam: (lastPage) => lastPage.nextPage, |
| 38 | + initialPageParam: 0, |
| 39 | + } |
| 40 | + ); |
| 41 | + |
| 42 | + return ( |
| 43 | + <div> |
| 44 | + {data?.pages.map((page, i) => ( |
| 45 | + <div key={i}> |
| 46 | + {page.items.map((post) => ( |
| 47 | + <div key={post.id}>{post.title}</div> |
| 48 | + ))} |
| 49 | + </div> |
| 50 | + ))} |
| 51 | + {hasNextPage && ( |
| 52 | + <button onClick={() => fetchNextPage()} disabled={isFetching}> |
| 53 | + {isFetching ? "Loading..." : "Load More"} |
| 54 | + </button> |
| 55 | + )} |
| 56 | + </div> |
| 57 | + ); |
| 58 | +}; |
| 59 | + |
| 60 | +export const App = () => { |
| 61 | + return ( |
| 62 | + <ErrorBoundary fallbackRender={({ error }) => `Error: ${error.message}`}> |
| 63 | + <MyComponent /> |
| 64 | + </ErrorBoundary> |
| 65 | + ); |
| 66 | +}; |
| 67 | +``` |
| 68 | + |
| 69 | +```ts [src/api.ts] |
| 70 | +import createFetchClient from "openapi-fetch"; |
| 71 | +import createClient from "openapi-react-query"; |
| 72 | +import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript |
| 73 | + |
| 74 | +const fetchClient = createFetchClient<paths>({ |
| 75 | + baseUrl: "https://myapi.dev/v1/", |
| 76 | +}); |
| 77 | +export const $api = createClient(fetchClient); |
| 78 | +``` |
| 79 | + |
| 80 | +::: |
| 81 | + |
| 82 | +## Api |
| 83 | + |
| 84 | +```tsx |
| 85 | +const query = $api.useInfiniteQuery( |
| 86 | + method, |
| 87 | + path, |
| 88 | + options, |
| 89 | + infiniteQueryOptions, |
| 90 | + queryClient |
| 91 | +); |
| 92 | +``` |
| 93 | + |
| 94 | +**Arguments** |
| 95 | + |
| 96 | +- `method` **(required)** |
| 97 | + - The HTTP method to use for the request. |
| 98 | + - The method is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. |
| 99 | +- `path` **(required)** |
| 100 | + - The pathname to use for the request. |
| 101 | + - Must be an available path for the given method in your schema. |
| 102 | + - The pathname is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. |
| 103 | +- `options` |
| 104 | + - The fetch options to use for the request. |
| 105 | + - Only required if the OpenApi schema requires parameters. |
| 106 | + - The options `params` are used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. |
| 107 | +- `infiniteQueryOptions` |
| 108 | + - The original `useInfiniteQuery` options. |
| 109 | + - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) |
| 110 | +- `queryClient` |
| 111 | + - The original `queryClient` option. |
| 112 | + - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) |
0 commit comments