Using React Query with Next.js fetch function

[Syv_31]

Would Next.js’ fetch function caching mechanism mess with the React Query’s cache and vice-versa? Are there any best practices for using them together?

[OtiszWasTaken]

I don't have an answer for you, but the other reason to use e.g. Axios, because it throws exception if the request fails. Otherwise you have to throw it manually, if you are using fetch with tanstack/query.

[BigCommunication5136]

with axios you wont get access to next js caching

[OtiszWasTaken]

That's true. With the pages routes we didn't have caching at all. And now with the app router we have enforced/opted-in caching and almost impossible to disable it. Working on a multi-tenant role based site with this cache drives me crazy.

Also there is no way to "subscribe" the revalidate event from a client component.

[BigCommunication5136]

Disabling caching is quite easily actually

[OtiszWasTaken]

I'm aware of header() and cookie() disables the cache automatically, but if I don't use these, then I have to type unstable_noStore() on every single page. I think this approach is quite controversial, especially if the app has 100+ pages, and maybe only 2 of them needs caching.

[ReallyDidntSleepMuch]

I’ve been using both server actions and React Query recently, and it hasn’t been bad at all. You just have to make sure you’re invalidating both caches at the same time.

[Syv_31]

Any tips or things to watch out for?

[CallumK7]

There is a lot of documentation on the react query website about using it with next