KevinVandy/material-react-table

MRT Grid Infinite scrolling with RTk Query

Vigneshvaraa opened this issue · 1 comments

material-react-table version

v2.12.1

react & react-dom versions

v18.2.0 & v18.2.0

Describe the bug and the steps to reproduce it

As per the documentation of MRT's Infinite Scroll (), it's using tanstack query with useInfiniteQuery to call api. I tried to replicate the same but we are using RTK query and that couldn't be called inside a queryFn. Is it possible to use RTK query for infinite scrolling in MRT? If so kindly share some examples.

Minimal, Reproducible Example - (Optional, but Recommended)

As Per Documentation:
const { data, fetchNextPage, isError, isFetching, isLoading } =
useInfiniteQuery({
queryKey: [
'table-data',
columnFilters, //refetch when columnFilters changes
globalFilter, //refetch when globalFilter changes
sorting, //refetch when sorting changes
],
queryFn: async ({ pageParam }) => {
const url = new URL(
'/api/data',
process.env.NODE_ENV === 'production'
? 'https://www.material-react-table.com'
: 'http://localhost:3000',
);
url.searchParams.set('start', ${(pageParam as number) * fetchSize});
url.searchParams.set('size', ${fetchSize});
url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
url.searchParams.set('globalFilter', globalFilter ?? '');
url.searchParams.set('sorting', JSON.stringify(sorting ?? []));

    const response = await fetch(url.href);
    const json = (await response.json()) as UserApiResponse;
    return json;
  },
  initialPageParam: 0,
  getNextPageParam: (_lastGroup, groups) => groups.length,
  refetchOnWindowFocus: false,
});

Expected:
Is it possible to achieve this with RTK query?

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Sure, it's possible, but I'm not going to spend the time myself to make an example. This should not be opened as an issue since this is not a bug. Convert to discussion.