useInfiniteQuery refetch calls the api with default page number

[Npervic]

Hey guys I'm having a problem with re fetching infinite data. I have implemented infinite loading for a table I use in my app to fetch next pages and this works great.

So i call the hook like this:

I call this with these settings:

Now when calling refetch the default page number set in the queryFn method (1) is sent for all 3 requests when for example i have 3 pages loaded it calls the back end like this:

When I call get next page I pass the pageParam value. This is not the case with refetch so the pageParam value defaults to 1.

I'm kinda unsure how refetching works but i figured it should use the getPreviousPageParam function that I passed. The API is all ways called the right amount of times but I'm wondering if and how I should maintain what page is current in my state and somehow pass it? Any help is greatly appreciated.

[TkDodo]

could be a bug in refetch on infiniteQuery, not sure. Can you try to reproduce this in a codesandbox?

My other question would be why you would need refetch ? There might be better alternatives :)

[Npervic]

I'm using re fetch to refresh table data (either on filter change or on refresh button click):

Yeah I struggled to find a real API that's public to mimic table calls but I managed to create an example:
https://codesandbox.io/s/xenodochial-herschel-4vp7o?file=/src/App.js
The example works fine so I'm guessing I messed up in the implementation I have in my real app. What are the alternatives btw?

[TkDodo]

The example works fine so I'm guessing I messed up in the implementation I have in my real app.

i would suggest to now either add more code to the example until it matches your real app, or work backwords from your app until you reach the example. The issue might just be a minor thing :)

What are the alternatives btw?

if you want a real "refetch" button that refetches whenever you click - the refetch method is fine, that's what it's for. If a filter changes and you want to refetch because of that, the declarative approach would be to add the filter value from your local state to the query key, because react-query will automatically refetch when the query key changes. I've written about this in depth here: https://tkdodo.eu/blog/practical-react-query#treat-the-query-key-like-a-dependency-array