fetchInfiniteQuery(...)

The method facilitates the fetching of paginated data. See TanStack queryClient.fetchInfiniteQuery 🌴 documentation for more details.

tip

fetchInfiniteQuery is particularly useful for server-side data fetching (SSR). When used on the server, it automatically provides all the retry logic and caching capabilities inherent to TanStack Query. This makes it an excellent choice for efficient and robust server-side data retrieval, ensuring your application benefits from built-in error handling and performance optimizations.

const result = api.<service>.<operation>.fetchInfiniteQuery(
  {
    parameters,
    ...fetchInfiniteQueryOptions,
  }
);

Arguments

1. • parameters: { path, query, header } | QueryKey | void
     • OpenAPI request parameters for the query, strictly-typed ✨
     • parameters will be used to generate the QueryKey
   • fetchInfiniteQueryOptions?: FetchInfiniteQueryOptions
     • requestFn?: RequestFn
       • Optional, a function that will be used to execute the request
       • The function should be provided, otherwise it will throw an error if default queryFn is not set previously using QueryClient.setDefaultOptions(...) method
     • baseUrl?: string
       • Optional, the base URL of the API
     • Optional, represents the rest options of the fetchInfiniteQuery(...) 🌴 method
       • queryOptions.queryFn could be provided instead of requestFn
       • queryOptions.queryKey could be provided instead of parameters

Returns

Promise<InfiniteData<T>> - A promise of the paginated data and page parameters

Example

/**
 * Will execute the initial request:
 * ###
 * GET /posts?limit=10&page=1
 * ###
 * And then will execute the next page request:
 * GET /posts?limit=10&page=2
 **/
import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI
import { requestFn } from '@openapi-qraft/react';
import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
  requestFn,
  queryClient,
  baseUrl: 'https://api.sandbox.monite.com/v1',
});

const posts = api.posts.getPosts.fetchInfiniteQuery(
  {
    parameters: { query: { limit: 10 } },
    pages: 2, // How many pages to fetch
    initialPageParam: {
      query: { pagination_token: undefined }, // will be used in initial request
    },
    getNextPageParam: (lastPage, allPages, lastPageParam) => ({
      query: { pagination_token: lastPage.next_pagination_token },
    }),
  }
);

console.log(
  posts.pages, // all fetched pages
  posts.pageParams // all page parameters
);