infinite scroll for large data

TS2345: Argument of type '{ resource: string; pagination: { pageSize: number; }; }' is not assignable to parameter of type 'UseInfiniteListProps<any, HttpError>'.
  Object literal may only specify known properties, and 'pagination' does not exist in type 'UseInfiniteListProps<any, HttpError>'.

              name: "Customers",
              list: Customers,
              show: CustomerDetails,
              create: CreateCustomer,
              edit: EditCustomer,
              icon: <Person/>,
            },

No overload matches this call.
  Overload 1 of 2, '(props?: ({ resource?: string | undefined; initialCurrent?: number | undefined; initialPageSize?: number | undefined; initialSorter?: CrudSorting | undefined; permanentSorter?: CrudSorting | undefined; ... 7 more ...; dataProviderName?: string | undefined; } & SuccessErrorNotification & LiveModeProps & { ...; }) | undefined): useTableReturnType<...>', gave the following error.
    Object literal may only specify known properties, but 'pagination' does not exist in type '{ resource?: string | undefined; initialCurrent?: number | undefined; initialPageSize?: number | undefined; initialSorter?: CrudSorting | undefined; permanentSorter?: CrudSorting | undefined; ... 7 more ...; dataProviderName?: string | undefined; } & SuccessErrorNotification & LiveModeProps & { ...; }'. Did you mean to write 'hasPagination'?
  Overload 2 of 2, '(props?: ({ resource?: string | undefined; initialCurrent?: number | undefined; initialPageSize?: number | undefined; initialSorter?: CrudSorting | undefined; permanentSorter?: CrudSorting | undefined; ... 7 more ...; dataProviderName?: string | undefined; } & SuccessErrorNotification & LiveModeProps & { ...; }) | undefined): useTableNoPaginationReturnType<...>', gave the following error.

import React from "react";  
import { useInfiniteList } from "@refinedev/core";  
  
const PostList = () => {  
 const { data, isError, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteList({  
 resource: "categories",  
 pagination: {  
 pageSize: 4,  
 },  
 });  
  
 if (isLoading) {  
 return <p>Loading</p>;  
 }  
 if (isError) {  
 return <p>Something went wrong</p>;  
 }  
  
 const allPages = [].concat(...(data?.pages ?? []).map((page) => page.data));  
  
 return (  
 <div>  
 <ul>  
 {allPages.map(({ id, title }) => (  
 <li key={id}>  
 {id}.{title}  
 </li>  
 ))}  
 </ul>  
 {hasNextPage && (  
 <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>  
 {isFetchingNextPage ? "Loading more..." : "Load More"}  
 </button>  
 )}  
 </div>  
 );  
};  

import React from "react";  
import { useInfiniteList } from "@refinedev/core";  
  
const PostList = () => {  
 const { data, isError, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteList({  
 resource: "categories",  
 pagination: {  
 pageSize: 4,  
 },  
 });  
  
 if (isLoading) {  
 return <p>Loading</p>;  
 }  
 if (isError) {  
 return <p>Something went wrong</p>;  
 }  
  
 const allPages = [].concat(...(data?.pages ?? []).map((page) => page.data));  
  
 return (  
 <div>  
 <ul>  
 {allPages.map(({ id, title }) => (  
 <li key={id}>  
 {id}.{title}  
 </li>  
 ))}  
 </ul>  
 {hasNextPage && (  
 <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>  
 {isFetchingNextPage ? "Loading more..." : "Load More"}  
 </button>  
 )}  
 </div>  
 );  
};  

import { useInfiniteList } from "@refinedev/core";  
  
const { data, error, hasNextPage, isLoading, fetchNextPage, isFetchingNextPage } = useInfiniteList({  
 resource: "posts",  
 queryOptions: {  
 // When you override this method, you can access the `lastPage` and `allPages`.  
 getNextPageParam: (lastPage, allPages) => {  
 // return the last post's id  
 const { data } = lastPage;  
 const lastPost = data[data.length - 1];  
 return lastPost.id;  
 },  
 },  
});  

  const {
    tableQueryResult: {data, isLoading, isError, isFetching, isRefetching, refetch }
  } = useTable();
  

import { useInfiniteList } from "@refinedev/core";

const {
  data,
  isError,
  isLoading,
  hasNextPage,
  fetchNextPage,
  isFetchingNextPage
} = useInfiniteList({
  resource: "yourResourceName", // replace with your resource name
  pagination: {
    pageSize: 10, // replace with your desired page size
  },
});

const {
  data,
  isError,
  isLoading,
  hasNextPage,
  fetchNextPage,
  isFetchingNextPage,
  refetch, // This is the refetch function
} = useInfiniteList({
  resource: "yourResourceName", // replace with your resource name
  pagination: {
    pageSize: 10, // replace with your desired page size
  },
});

<button onClick={refetch}>Refresh</button>

const { queryResult } = useInfiniteList({
  resource: "yourResourceName",
  pagination: {
    pageSize: 10,
  },
});

const { data, isLoading, isFetching, isRefetching } = queryResult;

npm run refine add resource yourResourceName

import React, { useEffect, useRef } from "react";
import { useInfiniteList } from "@refinedev/core";

const PostList = () => {
  const {
    data,
    isError,
    isLoading,
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage,
  } = useInfiniteList({
    resource: "categories",
    pagination: {
      pageSize: 4,
    },
  });

  const observer = useRef();
  const lastPostElementRef = useCallback(
    (node) => {
      if (isLoading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasNextPage) {
          fetchNextPage();
        }
      });
      if (node) observer.current.observe(node);
    },
    [isLoading, hasNextPage]
  );

  if (isLoading) {
    return <p>Loading</p>;
  }
  if (isError) {
    return <p>Something went wrong</p>;
  }

  const allPages = [].concat(...(data?.pages ?? []).map((page) => page.data));

  return (
    <div>
      <ul>
        {allPages.map(({ id, title }, index) => (
          <li key={id} ref={index === allPages.length - 1 ? lastPostElementRef : null}>
            {id}.{title}
          </li>
        ))}
      </ul>
      {isFetchingNextPage && <p>Loading more...</p>}
    </div>
  );
};

TS2322: Type '() => string' is not assignable to type 'ComponentType<IResourceComponentsProps<any, any, ILogData>> | undefined'.
  Type '() => string' is not assignable to type 'FunctionComponent<IResourceComponentsProps<any, any, ILogData>>'.
    Type 'string' is not assignable to type 'ReactElement<any, any>'.

import { useDelete, useLogout, useTable, useInfiniteList, HttpError } from '@pankod/refine-core'
  const {
    data,
    isLoading,
    isError,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  } = useInfiniteList<any,HttpError>({
    resource: "Products",
    pagination: { pageSize: 4, },
  });

const {{
  data,
  isLoading,
  isError,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage
}} = useInfiniteList<any, HttpError>({{
  resource: "Products",
}});

const {{
  data,
  isLoading,
  isError,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage
}} = useInfiniteList<any, HttpError>({{
  resource: "Products",
}});

// ...

{hasNextPage && (
  <button onClick={{() => fetchNextPage()}} disabled={{isFetchingNextPage}}>
    {{isFetchingNextPage ? "Loading more..." : "Load More"}}
  </button>
)}

import React from "react";
import { useTable } from "@pankod/refine-core";

const Customers = () => {
  const { tableProps } = useTable();

  // Render your table using tableProps
  // ...

  return <YourTableComponent {...tableProps} />;
};

// Then, in your resources array:

{
  name: "Customers",
  list: Customers,
  show: CustomerDetails,
  create: CreateCustomer,
  edit: EditCustomer,
  icon: <Person/>,
}

import React, { useEffect, useState } from "react";
import { useList } from "@pankod/refine-core";

const PostList = () => {
  const [page, setPage] = useState(1);
  const { data, isLoading, isError } = useList({
    resource: "posts",
    pagination: { current: page, pageSize: 10 },
  });

  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight
      )
        return;
      setPage((prevPage) => prevPage + 1);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  if (isLoading) {
    return <p>Loading</p>;
  }
  if (isError) {
    return <p>Something went wrong</p>;
  }

  return (
    <div>
      <ul>
        {data?.data.map(({ id, title }) => (
          <li key={id}>
            {id}.{title}
          </li>
        ))}
      </ul>
    </div>
  );
};

import React, {{ useEffect, useState }} from "react";
import {{ useTable }} from "@pankod/refine-core";

const PostList = () => {{
  const [page, setPage] = useState(1);
  const {{ tableProps, data, isLoading, isError }} = useTable({{
    resource: "posts",
    pagination: {{ current: page, pageSize: 10 }},
  }});

  useEffect(() => {{
    const handleScroll = () => {{
      if (
        window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight
      )
        return;
      setPage((prevPage) => prevPage + 1);
    }};
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }}, []);

  if (isLoading) {{
    return <p>Loading</p>;
  }}
  if (isError) {{
    return <p>Something went wrong</p>;
  }}

  // Render your table using tableProps
  // ...

  return <YourTableComponent {{...tableProps}} />;
}};