useInfiniteQuery

The useInfiniteQuery method allows you to use the original useInfiniteQuery

• The result is the same as the original function.
• The queryKey is [method, path, options, "infinite"]: the queryKey of queryOptions 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.

Example

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

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

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 (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 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
• queryClient
  • The original queryClient option.
  • See more information