refetch vs invalidating query

[ytnytn1]

Hello!
In the documentation how to invalidate queries after mutations I can see that it is suggested to use query invalidation. I'm curious what if instead of invalidation use refetching ? Won't give the same effect?

Thanks in advance!

[TkDodo]

I'm curious what if instead of invalidation use refetching ? Won't give the same effect?

invalidation is a more "smart" refetching. Refetching will always refetch, even if there are no observers for the query. invalidation will just mark them as stale so that they refetch the next time an observer mounts. For queries with active observers, there is no difference as far as I'm aware.

[TkDodo]

invalidateQueries will deduplicate in-flight requests preferring the first sent request

no it doesn't. you're referencing a discussion from 2020, and this behaviour was changed in v4:

• https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-react-query-4#consistent-behavior-for-cancelrefetch

[toytonic]

Sorry for chipping in here @TkDodo, but this is the discussion that I found closest to answer my question.
Is there any other way to bypass enbaled than refetch? I have the exact use case where I have a disabled query for a search/filter result only executing on user click, but mutations in nested components that should trigger a refetch for updating the result list.

[TkDodo]

Is there any other way to bypass enbaled than refetch?

no.

I have the exact use case where I have a disabled query for a search/filter result only executing on user click

can you show a reproduction please? I don’t get that use-case. enabled: !!myCondition usually means that the query cannot be executed until myCondition is fulfilled. Why would you need to run it anyways? If you have enabled: false (like, the hardcoded value false) for search/filtering onClick, you’re doing it wrong.

[toytonic]

Thanks for clarifying @TkDodo.
I might very well have chosen the wrong path or went for composing my fetch/mutation logic the wrong way.

The use-case is that I want to fetch some list data on user click. AFAIK I have to set enabled: false and use refetch to achieve this. After the result is fetched, I can mutate/delete individual items of that result list. In order to update to the result list after successful mutation/deletion I have to update the list. Of course I can (optimistically) manipulate the cache, but best practice according to examples is to refetch anyways, right?

I placed the mutation/deletion logic into custom hooks, which as of now do not have access to the refetch function of the result list query. Which they would not need to if I could make the result list query refetch through invalidation.

So hopefully that brings some clarity on my specific use-case. Happy to receive some feedback how to improve things on my end in general.

[TkDodo]

AFAIK I have to set enabled: false and use refetch to achieve this

you usually want lazy queries: https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries#lazy-queries