-
-
Notifications
You must be signed in to change notification settings - Fork 487
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(react-query): add useInfiniteQuery docs
- Loading branch information
1 parent
ba441ca
commit dabc800
Showing
1 changed file
with
112 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
--- | ||
title: useInfiniteQuery | ||
--- | ||
|
||
# {{ $frontmatter.title }} | ||
|
||
The `useInfiniteQuery` method allows you to use the original [useInfiniteQuery](https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries) | ||
|
||
- The result is the same as the original function. | ||
- The `queryKey` is `[method, path, params]`. | ||
- `data` and `error` are fully typed. | ||
- You can pass infinite query options as fourth parameter. | ||
|
||
::: tip | ||
You can find more information about `useInfiniteQuery` on the [@tanstack/react-query documentation](https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries). | ||
::: | ||
|
||
## Example | ||
|
||
::: code-group | ||
|
||
```tsx [src/app.tsx] | ||
import { $api } from "./api"; | ||
const PostList = () => { | ||
const { data, fetchNextPage, hasNextPage, isFetching } = | ||
$api.useInfiniteQuery( | ||
"get", | ||
"/posts", | ||
{ | ||
params: { | ||
query: { | ||
limit: 10, | ||
}, | ||
}, | ||
}, | ||
{ | ||
getNextPageParam: (lastPage) => lastPage.nextPage, | ||
initialPageParam: 0, | ||
} | ||
); | ||
|
||
return ( | ||
<div> | ||
{data?.pages.map((page, i) => ( | ||
<div key={i}> | ||
{page.items.map((post) => ( | ||
<div key={post.id}>{post.title}</div> | ||
))} | ||
</div> | ||
))} | ||
{hasNextPage && ( | ||
<button onClick={() => fetchNextPage()} disabled={isFetching}> | ||
{isFetching ? "Loading..." : "Load More"} | ||
</button> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export const App = () => { | ||
return ( | ||
<ErrorBoundary fallbackRender={({ error }) => `Error: ${error.message}`}> | ||
<MyComponent /> | ||
</ErrorBoundary> | ||
); | ||
}; | ||
``` | ||
|
||
```ts [src/api.ts] | ||
import createFetchClient from "openapi-fetch"; | ||
import createClient from "openapi-react-query"; | ||
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript | ||
|
||
const fetchClient = createFetchClient<paths>({ | ||
baseUrl: "https://myapi.dev/v1/", | ||
}); | ||
export const $api = createClient(fetchClient); | ||
``` | ||
|
||
::: | ||
|
||
## Api | ||
|
||
```tsx | ||
const query = $api.useInfiniteQuery( | ||
method, | ||
path, | ||
options, | ||
infiniteQueryOptions, | ||
queryClient | ||
); | ||
``` | ||
|
||
**Arguments** | ||
|
||
- `method` **(required)** | ||
- The HTTP method to use for the request. | ||
- The method is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. | ||
- `path` **(required)** | ||
- The pathname to use for the request. | ||
- Must be an available path for the given method in your schema. | ||
- The pathname is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. | ||
- `options` | ||
- The fetch options to use for the request. | ||
- Only required if the OpenApi schema requires parameters. | ||
- The options `params` are used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. | ||
- `infiniteQueryOptions` | ||
- The original `useInfiniteQuery` options. | ||
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) | ||
- `queryClient` | ||
- The original `queryClient` option. | ||
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) |