use-infinite-query.md

title
useInfiniteQuery

{{ $frontmatter.title }}

The useInfiniteQuery method allows you to use the original useInfiniteQuery

• 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. :::

Example

::: code-group

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

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

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 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 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 for more information.
• infiniteQueryOptions
  • The original useInfiniteQuery options.
  • See more information
• queryClient
  • The original queryClient option.
  • See more information