like-gold•2h ago

useinfinitelist in refine 5

I have an issue with useinfinitelist on refine 5 as it always fetch the same page instead of incrementing the page number.

11 Replies

kapa.ai•2h ago

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue with useInfiniteList in Refine 5—where it always fetches the same page instead of incrementing the page number—has been reported by other users and is related to how pagination parameters are passed to the getList method in recent versions. What’s happening:
A change in the internal implementation caused the pagination.current (or currentPage) value not to update correctly when fetching the next page. As a result, the data provider always receives the initial page value, so it keeps fetching the same page repeatedly. Relevant details: - This issue was introduced after a commit that switched from passing a paginationProperties object (which included the updated currentPage) to passing preferredPagination directly, which does not always include the incremented page value. This breaks both offset and cursor-based pagination, as the data provider never receives the updated page or cursor value for subsequent requests. - Multiple users have confirmed that, after this change, the getList method always receives the same pagination.currentPage value, so the same data is fetched on every "load more" action. The fix would be to ensure that the incremented page value is passed to the data provider, as was done before the change. There is also a GitHub issue describing this exact problem, with users confirming that the bug persists even after an attempted fix. Workarounds: - Some users have worked around this by modifying their data provider to default to page 1 if pagination.current is undefined, but this is not a true fix and may not work for all cases. - You may need to wait for an official patch or consider downgrading to a version before this breaking change if pagination is critical for your use case. Summary:
This is a known bug in Refine 5’s useInfiniteList hook, and it is not caused by your code. The issue is with how the hook passes pagination information to the data provider, resulting in repeated requests for the same page. You can follow the discussion and any upcoming fixes in the related GitHub issue. If you need cursor-based pagination, you may also need to override the getNextPageParam method as described in the docs, but the underlying bug with the pagination parameter must be resolved for this to work reliably How to use cursor-based pagination? Cursor pagination broken. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2h ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

like-goldOP•1h ago

@kapa.ai this means that query.fetchNextPage(); is not working correctly

kapa.ai•1h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, according to the knowledge sources, the issue with useInfiniteList in Refine 5 causes query.fetchNextPage() (or fetchNextPage from the hook) to not work correctly. Instead of incrementing the page number and fetching the next set of data, it repeatedly fetches the same page. This is due to the pagination parameter (currentPage or current) not being updated and passed correctly to the data provider after a recent internal change. As a result, every call to fetchNextPage results in the same data being requested from the backend, rather than advancing to the next page Cursor pagination broken useInfiniteList pagination is broken. This is a known bug and not an issue with your usage of the hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•1h ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

like-goldOP•1h ago

@kapa.ai i can't downgrade here. what's my solution?

kapa.ai•1h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Given the current state of the knowledge sources, there is no official fix or reliable workaround documented for this useInfiniteList pagination issue in Refine 5, other than downgrading. Some users have attempted workarounds by modifying their data provider to set a default page when pagination.current is undefined, but this is not a robust or recommended solution and may not work in all scenarios. The core problem is that the incremented page value is not being passed to the data provider, so any workaround would be a temporary patch at best Cursor pagination broken useInfiniteList pagination is broken. If you cannot downgrade, you may try to: - Override the getNextPageParam in queryOptions to manually control the pagination cursor or page, as described in the documentation. However, due to the underlying bug, this may not fully resolve the issue if the hook itself does not pass the correct value to the data provider How to override the getNextPageParam method?. - Patch your data provider to infer the next page if possible, but this is not a guaranteed fix. Unfortunately, the knowledge sources do not provide a definitive solution for Refine 5 at this time. You may want to monitor the related GitHub issue for updates or fixes from the Refine team Cursor pagination broken. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•1h ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

like-goldOP•1h ago

@kapa.ai how do I use the getNextPageParam then?

kapa.ai•1h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use getNextPageParam with useInfiniteList in Refine, you should provide it inside the queryOptions property of the hook. This allows you to control how the next page parameter (such as a cursor or page number) is determined for each subsequent fetch. Here’s how you can use it:

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

const {
  data,
  error,
  hasNextPage,
  isLoading,
  fetchNextPage,
  isFetchingNextPage,
} = useInfiniteList({
  resource: "posts",
  queryOptions: {
    // Override this method to return the next page parameter (e.g., cursor or id)
    getNextPageParam: (lastPage, allPages) => {
      // Example: return the last item's id as the next cursor
      const { data } = lastPage;
      const lastPost = data[data.length - 1];
      return lastPost.id;
    },
  },
});

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

const {
  data,
  error,
  hasNextPage,
  isLoading,
  fetchNextPage,
  isFetchingNextPage,
} = useInfiniteList({
  resource: "posts",
  queryOptions: {
    // Override this method to return the next page parameter (e.g., cursor or id)
    getNextPageParam: (lastPage, allPages) => {
      // Example: return the last item's id as the next cursor
      const { data } = lastPage;
      const lastPost = data[data.length - 1];
      return lastPost.id;
    },
  },
});

- lastPage is the result of the last fetched page. - allPages is an array of all fetched pages so far. - You should return the value that your API expects as the next page parameter (e.g., a cursor, an id, or a page number). Note:
This approach is especially useful for cursor-based pagination. However, if the underlying bug in Refine 5 prevents the correct parameter from being sent to your data provider, this method may not fully resolve the issue until the bug is fixed in the framework itself How to override the getNextPageParam method?. If your API uses a cursor, make sure your data provider and getList method are set up to handle the cursor value accordingly. For more details and examples, see the official documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•1h ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useinfinitelist in refine 5

Did you find this page helpful?