React-query-Infinite-Scroll

Installation

yarn add react-query-infinite-scroll

npm i react-query-infinite-scroll

pnpm i react-query-infinite-scroll

Usage

   //For v5, use react-query-infinite-scroll v2.0.0.
import * as React from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import { QueryInfiniteScroll } from "react-query-infinite-scroll";

import { queryKey, queryFn, getNextPageParam } from "./getData";

export function Example() {
    const query = useInfiniteQuery({
        queryKey,
        queryFn,
        initialPageParam: 1,
        getNextPageParam,
    });

    return (
        <QueryInfiniteScroll
            query={query}
            loading={<div>loading</div>}
            error={<div>loading</div>}
            observer={<div>loading</div>}
        >
            {(res) => {
                return res?.products.map((data) => (
                    <div key={data.id}>{data.title}</div>
                ));
            }}
        </QueryInfiniteScroll>
    );
}

// For v4, use react-query-infinite-scroll v1.1.0.
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { QueryInfiniteScroll } from "react-query-infinite-scroll";

 const query = useInfiniteQuery(
     ["list"],
      async ({ pageParam = 1 }) => await fetchList()  .. ,
     { getNextPageParam } 
   );
 

  <QueryInfiniteScroll
    query={query}
    loading={<div>loading</div>}
    error={<div>error</div> || (error)=> <div>{error}</div>}
    observer={<div>loading</div>}
  >
    {(res) => {
      return res?.data.map((data, idx) => <div key={idx}>{data._id}</div>);
    }}
  </QueryInfiniteScroll>

Props

export interface QueryInfiniteScrollProps<TValue, TError> {
  /**
   *  useInfiniteQuery result data
   * */
  query: UseInfiniteQueryResult<InfiniteData<TData>, TError>;
  /**
   * When react-query status error occurs in fetch data,
   * the screen being rendered is replaced with an error page.
   * */
  error?: ReactNode | ((error: TError) => ReactNode);
  /**
   * If react-query status is in the loading state,
   * the screen is replaced.
   * */
  loading?: ReactNode;
  /**
   * Replace the component that will go into the screen below
   * */
  observer?: ReactNode;
}