How to retry failed request with the same query keys

[donysukardi]

Suppose we have a setup like the following, with SearchForm and SearchResults components that operates on searchParams state.

With such setup, when useQuery fails and user presses Submit button again, the useQuery won't rerun since the searchParams is deep equal with the previous value.

Is there any recommended pattern to solve this?

I can think of one solution, which is to compare new searchParams with existing one and if it's deep equal, I invalidate existing query instead.

[TkDodo]

I usually call refetch if the params are equal. You can also do refetch if the query is erroneous

[donysukardi]

To do that, the useQuery hook has to be moved up to the parent component, doesn't it?

[TkDodo]

You can also refetch via the queryClient