How to prevent refetch on mount for infinite queries

[naresh1021]

Is there a way to prevent refetching of the data on mount for an infinite query? I have an infinite query that is executed and the scrolling fetched all the pages. Now when the component is unmounted and mounted again, the data is loaded from the cache but the background refetching happens even though refetchOnMount is set to false.

This issue can be reproduced with the same code: https://codesandbox.io/s/fervent-ives-6v9gk
Forked the 'Load More | Infinite Scroll' and added the refetchOnMount: false.

Steps to repro:

1. Scroll to fetch all the pages
2. Go to another page
3. Click 'Back' to go to the previous page.

Check the network tab to see that the queries are refetched.

[TkDodo]

The example you showed doesn't have refetchOnMount: false. If I set it to false, it works as expected: https://codesandbox.io/s/vigorous-swanson-sb7g5?file=/pages/index.js

maybe you have seen a different refetch, like a window focus refetch that can happen when you go to the network tab and back? It's a very common gotacha during development.

I also find it better to set staleTime to tell the library when some data is too old, so that it can then refetch if necessary (mount, focus, or whatever..)

[brianlovin]

@TkDodo — I was reading through these docs and it looks like it's possible to control which page of an infinite query is refetched whenever you manually invoke refetchQueries or invalidateQueries. I was wondering if it's possible to do the same for refetchOnWindowFocus.

My use case is: whenever someone loads my app, I only want to see if there are new posts in a feed, so I really only care about refetching the first page. But right now if someone has loaded 10 pages of the feed, and they refocus the window, it is firing 10 network requests for each page in the infinite query.

[TkDodo]

so I really only care about refetching the first page.

I don't understand this scenario. Let's assume I've been on your feed scrolling down twice, so I have 3 pages (showing numbers, 3 per page):

pages: [{ 1, 2, 3 }, { 4, 5, 6 }, { 7, 8, 9 }]

Now I leave the feed and come back in 10 minutes. In this time, item number 3 has been deleted. We only refetch page 1. Here's what we'll see:

pages: [{ 1, 2, 4 }, { 4, 5, 6 }, { 7, 8, 9 }]

notice how item number 4 is now here twice! You can see a similar issue when an item is inserted between 1 and 2 instead:

pages: [{ 1, 12, 2 }, { 4, 5, 6 }, { 7, 8, 9 }]

now post 3 is missing even though it should be there.

The bottom line is: infinite queries are actually one query that is just junked into multiple requests. Only fetching parts of it can lead to incorrect UIs being displayed. I actually kinda regret the decision to add the refetchPages option....

---

the better workaround for this scenario would be to actually delete pages when you leave the page, e.g. in an effect:

useEffect(() => {
  return () => {
    queryClient.setQueryData(
      infiniteQueryKey,
      (old) => old
        ? ({ pages: old.pages.slice(0, 1), pageParams: old.pageParams.slice(0,1)})
        : undefined
  }
}, [queryClient])

[brianlovin]

I've been following your tweets today about the subject, I totally understand I'm coming in with a naive ask and the underlying system is much more complicated. Funny enough, we've had to write our own helper to de-duplicate infinitely-paginated results on the client because the list was getting out of sync with new data, deleted data, scrolling up, scrolling down, refetching on focus, etc.

It seems like I've confused the role of infinite pagination and what I'm trying to accomplish, which is to let people know about new posts. In this case, I probably want a way to only fetch new posts previous to the first post on the first page of paginated results. If there are newer posts, I could prepend them in the cache directly somehow.

Thank you for taking the time to answer. It sounds like working with infinite pagination will be going through a rework soon anyways, and I'm excited to see what you're cooking up. If you ever want someone to help test things in a real-world scenario, we'd love to help (at Campsite) 😊

[TkDodo]

yeah, this actually inspired a good discussion on twitter with a nice proposal, thank you for that 👍

if you want to follow along, let me know if those things would work for you:

• RFC: Infinite Queries for v5 #4854
• windowSize for useInfiniteQuery #4975