React-query: useInfiniteQuery is fetching twice the first page

[alveshelio]

Hi,

I've been reading the doc and trying to figure out what I'm doing wrong but.

I have this code

  const { status, data, error, isFetching, isFetchingMore, fetchMore, canFetchMore } = useInfiniteQuery(
    "activities",
    async (_key: any, nextPage = 1) => {
      return eventsServices.getActivities({ ...selectedParams, page: nextPage, perPage: 30 });
    },
    {
      getFetchMore: (lastGroup: IActivity[], groups: IActivity[][]) => {
        return lastGroup?.length ? groups.length : false;
      }
    }
  );

The firs time the page loads it will fetch my activities from page one, then when I scroll and fetchMore it's called, it's still fetching the first page.
According to the docs, there should be a nextCursor property in lastGroup but either the docs aren't up to date or I'm doing something wrong because I'm getting an undefined.

Also, according to the docs, By default, the info returned from getFetchMore will be supplied to the query function. So I'm wondering if there's something I'm doing wrong but it should be pretty straight forward according to the docs.

Any help would be greatly appreciated.

[alveshelio]

Thank you very much for the help, really appreciated guys. I've solved the problem by completely uninstalling react-query.

[tannerlinsley]

I’m sorry to see you go! Its a shame you weren’t able to wait just a day or two longer when I regularly plan on reviewing, answering, and fixing issues just like this one. Of course, if you truly need same day turnaround on issues, you’re more than welcome to sign up for my diamond sponsorship plan!

[georgiosd]

@tannerlinsley hey :)

Any luck solving this? I'm seeing it also. Promise to not give up on the library, I hate apollo with a passion 🗡️

[Myzel394]

@georgiosd Did you find a solution? I'm having the same issue.
After refocusing the window (after the data has been fetched at least once), the first page isn't being fetched twice and it works normally.

[georgiosd]

@Myzel394 I've let it live with a double request I guess.... not sure if @tannerlinsley is seeing these messages because it's a closed issue

[TkDodo]

Hi 👋
I’m using infinite query in production with no issues. The original issue sounds strange to me:

According to the docs, there should be a nextCursor property in lastGroup but either the docs aren't up to date or I'm doing something wrong because I'm getting an undefined.

getFetchMore receives the response from your backend. If it contains a field called nextCursor you can retrieve that, but it’s your duty to return something from getFetchMore that will then be supplied as the last parameter to the fetch function. There’s nothing magic that react query will do here.

Happy to help if you would provide a codesandbox example that shows the behavior you are experiencing :)