how to reset loaded pages in useInfiniteQuery

[ytnytn1]

Hi there!

I'm using useInfiniteQuery to populate an infinite list of data and that list has server-side sorting. The sorting parameter is the part of the query key so when I switch between different sorting the data for the list is retrieved from the cache but It leads to that undesired behavior described below:
let's assume sorting has 2 states: asc and desc . When the list was sorted asc user loaded 2 pages. If user switches to desc sorting it will trigger a new query and data will be cached. If user switches back to asc he will see there are 2 pages loaded.
here is a working example: https://codesandbox.io/s/focused-driscoll-e5z13?file=/pages/index.js

I would like behavior that when sorting is changed all loaded pages are reset except the first one.

I suppose I can use setQueryData but maybe there is a better way to achieve the desired behavior.

Thank you in advance!

[TkDodo]

I would like behavior that when sorting is changed all loaded pages are reset except the first one.

This is something you'd need to implement in user-land with setQueryData I believe. react-quey never deletes data it has already downloaded, unless you call reset, clear or it is garbage collected.

Partial deletion highly depends on your use-case. you want to the first one, somebody else might want the last one. I want them all, because if I've downloaded them already, why not show them. if you have a bi-directional infinite query, the "first" page might be the one in the middle, and so on :)

[ytnytn1]

I got it. Thanks a lot!