How can I implement filtering using useInfiniteQuery?

[seonghyeonkimm]

Description

• I wrote code to fetch more and more while scrolling.
• However, I want to build code to apply filter. so when applying some filter, I have to reset data of useInfiniteQuery.
• Is there a way to reset data?

[tannerlinsley]

You could simply change the query key to include your new filter.

[saysmaster]

Hello, a question: Does react-query cache data per key even if the data are the same resource? In the above filtering example, let's say we have a ['todos'] key, and a ['todos', { due: '2020-07-01' }], and suppose both keys return the same todos, for instance todo with id=1 is returned by both keys. Are there two instances in the cache for todo with id 1, one for each key, or there is just one instance?

[tannerlinsley]

It's cached per key, not by resource. This is intentional as well, seeing how generically it is very very difficult to design a system to know that two objects from disparate JSON APIs are equal not just in values, but in identity as well.

[vitorcamachoo]

I've a question about using useInfiniteQuerywith filters without refreshing all the "data" content. When I use useInfiniteQuery(['projects', params] where the params are { page: 1, description: '', location: ''}, when I change some of these properties, including "page" the data returns undefined, causing a refresh on UI. What I'm trying to achieve is to increase filter "page", and avoid the data being replaced, making it impossible to use infiniteQuery.
I've tried to extract page from params, and return it from getFetchMore, but since I use params as "second" argument of useInfiniteQuery, the fetch method don't receive "page" property.