evident-indigo•4w 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.

30 Replies

kapa.ai•4w 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•4w ago

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

evident-indigoOP•4w ago

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

kapa.ai•4w 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•4w ago

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

evident-indigoOP•4w ago

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

kapa.ai•4w 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•4w ago

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

evident-indigoOP•4w ago

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

kapa.ai•4w 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•4w ago

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

evident-indigoOP•4w ago

@kapa.ai my api doesn't use a cursor, so I overrode like this:

getNextPageParam: (lastPage) => {
        // return the last post's id
        const { pagination, total } = lastPage;
        if ((total / pagination.pageSize) > pagination.currentPage) {
          console.log("next page available", pagination.currentPage + 1)
          return pagination.currentPage + 1;
        }
      // Return undefined to indicate there are no more pages
        return undefined;
      },

getNextPageParam: (lastPage) => {
        // return the last post's id
        const { pagination, total } = lastPage;
        if ((total / pagination.pageSize) > pagination.currentPage) {
          console.log("next page available", pagination.currentPage + 1)
          return pagination.currentPage + 1;
        }
      // Return undefined to indicate there are no more pages
        return undefined;
      },

what should I do next?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your approach to overriding getNextPageParam for offset-based pagination (not cursor-based) is correct in principle: you calculate whether there is a next page and return the next page number if so. However, due to the current bug in Refine 5’s useInfiniteList, simply returning the next page number from getNextPageParam may not be enough, because the incremented page value is not reliably passed to your data provider’s getList method. This is a known issue and is discussed in the knowledge sources Cursor pagination broken. What you should do next: 1. Check what your data provider receives:
Add a console.log(pagination) in your data provider’s getList method to see if the incremented currentPage (or current) value is actually being passed when you call fetchNextPage. If it is not incrementing, the bug is affecting you and there is no reliable workaround documented in the knowledge sources. 2. If the value is not incrementing:
- There is no official fix or robust workaround in the knowledge sources for Refine 5 at this time. - Some users have patched their data provider to infer the next page, but this is not a recommended or reliable solution. 3. If the value is incrementing:
- Your getNextPageParam logic is fine. Make sure your data provider’s getList method uses the pagination.currentPage (or pagination.current) value to fetch the correct page from your API. Summary:
Your override for getNextPageParam is correct for offset-based pagination, but due to the bug in Refine 5, it may not work as expected. If you confirm that the incremented page value is not reaching your data provider, you will need to wait for an official fix from the Refine team, as there is no documented workaround that fully resolves this issue in the current version Cursor pagination broken. If you need more details on how to override getNextPageParam, see the official documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

evident-indigoOP•4w ago

@kapa.ai seems it's not incrementing. how do I patch my call to have it call the next page correctly?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, if useInfiniteList is not incrementing the page number and your data provider’s getList method always receives the same pagination.current or currentPage, there is unfortunately no officially documented patch or workaround in the current Refine 5 documentation or GitHub issues that reliably fixes this at the application level. Some users have tried to patch their data provider to infer the next page, for example by defaulting to page 1 if pagination.current is undefined, but this is not robust and is not recommended for production. The core issue is that the incremented page value is not being passed from the hook to the data provider, and this must be fixed in Refine itself Cursor pagination broken useInfiniteList pagination is broken. Summary:
- There is no reliable, documented way to patch your call to make useInfiniteList increment the page correctly in Refine 5 at this time. - The only workarounds mentioned are not robust and are not recommended. - You will need to wait for an official fix from the Refine team. If you need to track progress or contribute to the discussion, you can follow the related GitHub issue. I'm sorry, but the knowledge sources do not contain enough information to provide a working patch for this issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

evident-indigoOP•4w ago

@kapa.ai i cheated and used a state : getNextPageParam: (lastPage) => { const { pagination, total } = lastPage; if ((total / pagination.pageSize) > pagination.currentPage) { // console.log("next page available", pagination.currentPage + 1) setCurrentPage(pagination.currentPage + 1); return pagination.currentPage + 1; } // Return undefined to indicate there are no more pages return undefined; },

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Using a React state (like setCurrentPage) inside the getNextPageParam function is not recommended and is not documented as a supported approach in the Refine knowledge sources. The getNextPageParam function is intended to be a pure function that determines the next page parameter based solely on the data from the last page and all previously fetched pages. Introducing side effects (such as updating state) inside this function can lead to unpredictable behavior and is not aligned with how TanStack Query and Refine expect pagination to work. The knowledge sources do not provide an officially supported workaround for the current bug in Refine 5’s useInfiniteList where the next page is not incremented correctly. The recommended approach is to wait for an official fix from the Refine team, as patching with state updates inside getNextPageParam is not documented or guaranteed to work reliably Cursor pagination broken. In summary, while your workaround may appear to function in some cases, it is not supported or recommended according to the available documentation and may cause issues in your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

foreign-sapphire•4w ago

@SetiZ Hey there, are you still having this issue?

evident-indigoOP•4w ago

yess i did a quick fix with a state and calling it's ugly but seems to be working

foreign-sapphire•4w ago

Oh sorry, I didn't see the time. Thought the messages were from this morning. You can make an issue on our github and I will let the team know tomorrow.

evident-indigoOP•4w ago

it's just now 🙂

evident-indigoOP•4w ago

kapa seems to be suggesting it's related to this issue already https://github.com/refinedev/refine/issues/7006

GitHub

[BUG] Cursor pagination broken · Issue #7006 · refinedev/refine

Describe the bug In commit 1a02f02, in the file packages/core/src/hooks/data/useInfiniteList.ts, return getList<TQueryFnData>({ resource: resource.name, pagination: paginationProperties as an...

evident-indigoOP•4w ago

i'll add a new one and connect to this one just in case

evident-indigoOP•4w ago

I opened this issue: https://github.com/refinedev/refine/issues/7034

GitHub

[BUG] useInfiniteList: fetchNextPage keeps calling the same page ·...

Describe the bug I created an inifiniteList but i cannot fetch the nextpage. the same page is called and the currentPage is not incremented Steps To Reproduce using const { result: appliesResult, q...

foreign-sapphire•3w ago

@SetiZ
https://github.com/refinedev/refine/pull/7035 should be merged today or tomorrow. Thanks for reporting it!

GitHub

fix(core): useInfiniteList pagination not work by alicanerdurma...

PR Checklist Please check if your PR fulfills the following requirements: The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention Bugs ...

evident-indigoOP•3w ago

that's great news !! @Özgür Akça while dealing with my bug i saw that the documentation is out of date, still with refine 4. Can I contribute and try to update?

foreign-sapphire•3w ago

I can't check the documentation at the moment but, feel free to contribute It might take a bit to review fully, but we will get to it! Team is quite busy, so always happy to have people contribute

useinfinitelist in refine 5

Did you find this page helpful?