useInfiniteQuery(...)

The Hook enables you to perform asynchronous data fetching operations with support for infinite scrolling scenarios. See the TanStack useInfiniteQuery(...) 🌴 documentation for more details.

const query = api.<service>.<operation>.useInfiniteQuery(
  parameters,
  infiniteQueryOptions
)

Arguments

1. parameters: { path, query, header } | QueryKey | undefined

   • Required only if OpenAPI specification defines required parameters
   • If the operation has no required parameters according to OpenAPI, you can omit this argument
   • parameters will be used to generate the QueryKey
   • Instead of an object with {path, query, header}, you can pass a QueryKey as an array which is also strictly-typed ✨
   • If operation does not require parameters, you must pass an empty object {} for strictness

2. infiniteQueryOptions?: UseInfiniteQueryOptions

   • Optional, represents the options of the useInfiniteQuery(...) 🌴 Hook
     • queryOptions.queryFn could be provided to override the default queryFn used by Qraft

Returns

UseInfiniteQueryResult object, see the TanStack useInfiniteQuery(...) 🌴 documentation for more details.

Examples

Offset-based 🦌

src/PostList.tsx

import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
  requestFn,
  queryClient,
  baseUrl: 'https://my-blog.com/api',
});

function PostList() {
  /**
   * `api.posts.getPosts.useInfiniteQuery(...)` launches
   * the initial query to fetch the first page of posts:
   * ###
   * GET /posts?limit=10&page=1
   */
  const infiniteQuery = api.posts.getPosts.useInfiniteQuery(
    { query: { limit: 10 } },
    {
      getNextPageParam: (lastPage, allPages, lastPageParams) => {
        if (lastPage.length < 10) return; // if less than 10 items, there are no more pages
        return {
          query: {
            page: Number(lastPageParams.query?.page) + 1,
          },
        };
      },
      initialPageParam: {
        query: {
          page: 1, // will be used in initial request
        },
      },
    }
  );

  return (
    <div>
      {infiniteQuery.data?.pages.map((page, pageIndex) => (
        <ul key={pageIndex}>
          {page.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ))}
      <button onClick={() => {
        // ⬇︎ Initiates a GET request for the next page of posts: /posts?limit=10&page=2
        infiniteQuery.fetchNextPage()
      }}>
        Load More
      </button>
    </div>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <PostList />
    </QueryClientProvider>
  );
}

PaginationToken-based 🦉

src/DataExportList.tsx

import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
  requestFn,
  queryClient,
  baseUrl: 'https://my-blog.com/api',
});

function DataExportList({ initial_pagination_token }: { initial_pagination_token: string }) {
  /**
   * `api.posts.getPosts.useInfiniteQuery(...)` launches
   * the initial query to fetch the first page of posts:
   * ###
   * GET /data_exports?pagination_token=<INITIAL_PAGINATION_TOKEN>
   * x-monite-version: 2023-09-01
   * x-monite-entity-id: 3e3e-3e3e-3e3e
   **/
  const infiniteQuery = api.dataExports.getDataExports.useInfiniteQuery(
    {
      header: {
        'x-monite-version': '2023-09-01',
        'x-monite-entity-id': '3e3e-3e3e-3e3e',
      },
    },
    {
      initialPageParam: {
        query: { pagination_token: initial_pagination_token }, // will be used in initial request
      },
      getNextPageParam: (lastPage, allPages, lastPageParam) => ({
        query: { pagination_token: lastPage.next_pagination_token },
      }),
      getPreviousPageParam: (firstPage, allPages, firstPageParam) => ({
        query: { pagination_token: firstPage.prev_pagination_token },
      }),
    }
  );

  return (
    <div>
      <button
        disabled={!infiniteQuery.hasPreviousPage}
        onClick={() => {
          /**
           * ⬇︎ Initiates a GET request:
          * GET /data_exports?pagination_token=<PREV_PAGINATION_TOKEN>
          * x-monite-version: 2023-09-01
          * x-monite-entity-id: 3e3e-3e3e-3e3e
          */
          infiniteQuery.fetchPreviousPage()
        }}
      >
        Load Previous
      </button>
      {infiniteQuery.data?.pages.map((page, pageIndex) => (
        <ul key={pageIndex}>
          {page.map((dataExport) => (
            <li key={dataExport.id}>{dataExport.name}</li>
          ))}
        </ul>
      ))}
      <button
        disabled={!infiniteQuery.hasNextPage}
        onClick={() => {
          /**
          * ⬇︎ Initiates a GET request:
          * GET /data_exports?pagination_token=<NEXT_PAGINATION_TOKEN>
          * x-monite-version: 2023-09-01
          * x-monite-entity-id: 3e3e-3e3e-3e3e
          */
          infiniteQuery.fetchNextPage()
        }}
      >
        Load More
      </button>
    </div>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <DataExportList initial_pagination_token={'first-page-token'} />
    </QueryClientProvider>
  );
}