A hook that helps you fetch a infinite list of resources.

The hook uses useInfiniteQuery from @tanstack/react-query to fetch data and cache it. It accepts various query options and performs an API request to fetch a list of resources based on the provided resource and params. The hook supports additional query parameters and custom API client parameters.

If a custom queryFn is provided, it will be used to perform the query; otherwise, the default API client method will be used. The queryKey is constructed based on the resource path and additional parameters to ensure proper caching and refetching.

By default, this hook sets the following options:

  • initialPageParam: 1
  • getNextPageParam: Calculates the next page number based on the length of the data in the last page.
  • getPreviousPageParam: Calculates the previous page number, but prevents it from going below 1.

These default options can be overridden if necessary.

import { useGetInfiniteList } from 'react-query-manager';

type TData = { id: 1, name: 'Test' };
const PATH = 'users/{id}/messages';

const infiniteQuery = useGetInfiniteList<typeof PATH, TData>({
resource: { path: PATH, params: { id: 10 } },
pagination: { page: ['page_number'], per_page: ['count', 20] },
});
  • Type Parameters

    • TPath extends string

      The API path as a string.

    • TData = any

      The expected shape of the data returned by the API.

    Parameters

    • options: {
          apiClientParams?: Partial<ApiProps>;
          pagination: QueryInfinitePagination;
          params?: Record<string, any>;
          queryOptions?: UseInfiniteQueryProps<QueryResponse<TData[]>, QueryInfiniteListKey<TPath>, {
              params: Record<string, any>;
              queryKey: QueryInfiniteListKey<TPath>;
              resource: Resource<TPath>;
          }>;
          resource: Resource<TPath>;
      }

      The options object for configuring the hook.

      • OptionalapiClientParams?: Partial<ApiProps>

        Additional options to pass to the API client.

      • pagination: QueryInfinitePagination

        The pagination configuration.

        • page - An array where the first element is the name of the query parameter that represents the page number. The page number will automatically increment with each subsequent request.

        • per_page - An array where the first element is the name of the query parameter that represents the number of items per page, and the second element is the value to be used for that parameter.

        For example:

        • { page: ['page_number'], per_page: ['count', 20] } will result in query parameters like ?page_number={{pageParam}}&count=20.
      • Optionalparams?: Record<string, any>

        Dynamic query parameters for the API request.

      • OptionalqueryOptions?: UseInfiniteQueryProps<QueryResponse<TData[]>, QueryInfiniteListKey<TPath>, {
            params: Record<string, any>;
            queryKey: QueryInfiniteListKey<TPath>;
            resource: Resource<TPath>;
        }>

        Additional options to configure the useInfiniteQuery hook.

      • resource: Resource<TPath>

        The resource path and any static parameters for the API request.

    Returns UseInfiniteQueryResult<InfiniteData<QueryResponse<TData[]>, unknown>, CustomError>

    The result of the useInfiniteQuery hook.