Discussion on: Quickly implement infinite scroll with Next.js and react-query

[igdev]

Hi you, thanks for your article. But I have a issue, how can I update my list character when mutated like adding a new character? 😅

[Elisabeth Leonhardt]

Hey, sorry for the late answer.
hmmmmm that depends:

1. one possibility is to make a refetch call in your code after the mutation. You can destructure the refetch function from the useQuery hook. There is also a remove method, to completely remove the data from the cache.
2. react-query has some pretty aggressive refetch policies. By default, it will refetch stale data on window refocus for example. That means, if a new character is added, it should already show up if you leave the window and refocus.

I have seen this while developing the this demo-project:

1. I would scroll down a few pages, let's say 5 pages.
2. I would click in my IDE to see some code, but not edit anything
3. When clicking again in the browser, I could see new requests for page 1 - 5 in the network tab, updating the stale data.

I hope that clarifies!