## Installation ```bash yarn add react-query-infinite-scroll
npm install react-query-infinite-scrollbash
yarn add react-query-infinite-scrollnpm i react-query-infinite-scroll
pnpm i react-query-infinite-scroll
`Usage
`tsx
//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 (
query={query}
loading={
loading}
error={loading}
observer={loading}
>
{(res) => {
return res?.products.map((data) => (
{data.title}
));
}}
);
}// 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 }
);
query={query}
loading={
loading}
error={error || (error)=> {error}}
observer={loading}
>
{(res) => {
return res?.data.map((data, idx) => {data._id});
}}
`Props
`tsx
export interface QueryInfiniteScrollProps {
/**
* useInfiniteQuery result data
/
query: UseInfiniteQueryResult, 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;
}
``