---
url: >-
  https://openapi-typesafe.github.io/openapi-typesafe/react-query/use-infinite-query.md
description: Typed useInfiniteQuery for paginated OpenAPI endpoints
---

# {{ $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, options, "infinite"]`: the `queryKey` of
  [`queryOptions`](./query-options) with `"infinite"` after it, so `useQuery` and
  `useInfiniteQuery` for the same request do not share a cache entry, and `[method, path]` still
  matches both in `invalidateQueries`. Its type is `InfiniteQueryKey`.
* `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";

export 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>
  );
};
```

```ts [src/api.ts]
import createFetchClient from "openapi-typesafe-fetch";
import createClient from "openapi-typesafe-react-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typesafe

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` **(required)**
  * The fetch options to use for the request.
  * Pass `{}` when the operation has no parameters.
  * The whole options object (`params`, `headers`, `body` and the rest) is part of the key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information.
* `infiniteQueryOptions` **(required)**
  * At least `initialPageParam` and `getNextPageParam`, as in the original `useInfiniteQuery`.
  * `pageParamName` The query param name used for pagination, `"cursor"` by default.
  * The page param is sent in that query param. When it is `undefined` (the first page with
    `initialPageParam: undefined`, as cursor APIs need), the query param is left out.
  * The page param type (`lastPageParam`, `data.pageParams`) is the type of `initialPageParam`
    together with the return types of `getNextPageParam` and `getPreviousPageParam`:
    `initialPageParam: undefined` and `(lastPage) => lastPage.nextCursor` give `string | undefined`.
    A return computed from `lastPageParam` cannot be inferred, so annotate that parameter, as in
    `(lastPage, allPages, lastPageParam: number) => lastPageParam + 1`; without the annotation the
    page param stays `unknown`.
  * 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)