How to prevent useInfiniteQuery to re-fetch previous pages?

[b-ferreira]

Hello,

I'm facing an issue with useInfiniteQuery. I've tried to use the answer in this question, but it didn't help

In my case, I have an infinite scroll with a filter.

While the user scrolls in the component, I call my API and I compute the next page to be called based on the last one in the getNextPageParams.
When the user uses the filter, the API returns all of the data for that particular filter on a single page.

I use something like this as the key for the queries: ['infinite-brands', { search: string, locale: string }].

Everything works beautifully.

However, considering the following situation:

• The user opens the component and scrolls until the Nth page. All of them will be loaded by react-query under the key ['infinite-brands', { search: '', locale: 'en_GB' }], for example.
• The user then uses the filter. react-query will load the data on a single page under the key ['infinite-brands', { search: 'far', locale: 'en_GB' }].
• The user then clears the filter.
• At this point, react-query is re-fetching all the N pages it was loaded before.

I would like to have the opportunity to reset the query ['infinite-brands', { search: '', locale: 'en_GB' }] to its first page and re-fetch only the first one instead of re-fetching all of the pages again.

I've tried to use setQueryData, removeQueries, and even clear before setting the search text, none of them helped.

Am I missing something?

[TkDodo]

if your search goes to empty string, before you set it to local state, you can do:

queryClient.setQueryData(
    ['infinite-brands', { search: '', locale: 'en_GB' }]
    data => ({ pages: data?.pages.slice(0,1) ?? [], pageParams: data?.pageParams.slice(0,1) ?? [] })
)

this should reduce the the pages in the cache to the first page only.

[TkDodo]

Would need to see that in a codesandbox please

[TkDodo]

here is the example from the docs with a button at the bottom that shows it works quite well:

https://codesandbox.io/s/billowing-wood-bv3yl?file=/pages/index.js

[b-ferreira]

Hello @TkDodo,

Thank you very much for the support.
I've found why the cache of my react-query was "disappearing".

Considering that our APIs always return the same response in error cases and we have a single way to deal with them, one of the things I was validating in my POC was a global onError which would display an error message whenever we get an error from the API.

We use our internal state management to display messages, so the onError would depend on our dispatcher. Because of this, the client was created inside of the main App component, which was providing the dispatcher dependency 🤦 .

I've removed it from there, now that we don't have a new query client on each re-render of the application the solution you provided has worked.

[TkDodo]

We use our internal state management to display messages, so the onError would depend on our dispatcher. Because of this, the client was created inside of the main App component

we do this as well. The trick is to useState with the lazy initializer:

const App = () => {
const toast = useToast()
const [queryClient] = React.useState(() => {
        const errorConfig = {
            onError: (error: unknown) => {
                if (error instanceof Error) {
                    toast.show({
                        text: error.message,
                        variant: 'danger',
                    })
                }
            },
        }

        return new QueryClient({
            queryCache: new QueryCache(errorConfig),
            mutationCache: new MutationCache(errorConfig),
        })
    })

    return (
        <QueryClientProvider client={queryClient}>
            <Example />
        </QueryClientProvider>
    )
}

I've also written about that here: https://tkdodo.eu/blog/use-state-for-one-time-initializations

[b-ferreira]

Really nice!

Thank you for sharing @TkDodo!