Skip to content

Commit

Permalink
docs(react-query): add useInfiniteQuery docs
Browse files Browse the repository at this point in the history
  • Loading branch information
jungwoo3490 committed Dec 15, 2024
1 parent ba441ca commit dabc800
Showing 1 changed file with 112 additions and 0 deletions.
112 changes: 112 additions & 0 deletions docs/openapi-react-query/use-infinite-query.md
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)

0 comments on commit dabc800

Please sign in to comment.