useInfiniteQuery with staleTime not calling api

[johnslay]

I might be using useInfiniteQuery in an unconventional way but here it goes.

The idea is that I want to render the table of items immediately after the first page loads, and then keep querying and appending the items until there aren't any pages left. The api I am using returns data in this manner:

{
  "resources": [],
  "nextToken": ""
}

For example:

export function Page() {
  const { data, canFetchMore, fetchMore } = useInfiniteQuery(
    "resource",
    callApi,
    {
      getFetchMore: (lastPage) => lastPage.nextToken || null,
    }
  );

 React.useEffect(() => {
    if (canFetchMore) {
      fetchMore();
    }
  });

  const resources = data.reduce((acc, curr) => {
    return acc.concat(curr);
  }, []);

  return (
    <div>
      <Table data={resources} />
    </div>
  );
}

This works fine and does exactly what I need it to do. The issue begins when I add staleTime like so:

const { data, canFetchMore, fetchMore } = useInfiniteQuery(
  "resource",
  callApi,
  {
    getFetchMore: (lastPage) => lastPage.nextToken || null,
    staleTime: 1000 * 10, // 10 seconds
  }
);

Now after adding this, here is what happens:

The first set of results comes back along with a nextToken. 10 seconds goes by and then the next page is requested. rinse and repeat until no more pages available.

Now I believe this is only a bug when using the query in this unconventional way. However I'd like to see what y'all think because I'm not able to use usePaginatedQuery in the way I'd like to due to the API constraints and UI requirements I have. Although I'm all ears if there is a reasonable way to make this work another way.

Thanks

[tannerlinsley]

Looks legit to me :)

[tannerlinsley]

If it's not working as intended, you likely need to call your fetchMore from within a useEffect, since it truly is a side effect.

[johnslay]

Ah yes that is the proper way to do it. However the issue still persists with fetchMore being called but the request isn't made.

[RicSilva83]

@TkDodo happening the same to me.

[TkDodo]

happening the same to me.

what is? This is a 3 year old discussion. Please show a reproduction of what exactly is not working for you