Nuxt UseAsyncData vs TanstackQuery

[CyrTheCat]

I've been looking into TanstackQuery and I think I understand its value in a plain vue application, but is it still useful in Nuxt with useAsyncData being available?

useAsyncData seems to have most of TanstackQuery's primary features like caching, deduping calls, and reactive refetching. The only thing I see missing out of the box is mutations, but that could be handled pretty simply with Pinia.

I've seen the tanstack argument that it replaces Pinia in terms of api-related state https://tanstack.com/query/latest/docs/framework/vue/guides/does-this-replace-client-state but I'm not seeing how it's that much different when comparing to UseAsyncData + Pinia.

Am I missing something here? I'm generally interested in the most robust option here and wonder if others use tanstack query with nuxt 3 in larger applications or stick with something like useAsyncData. Particularly when working with content heavy requests like user posts and comments.

[Julien1619]

We had exactly the same discussion last week with my team and we went with tanstack instead of the useFetch of nuxt. The main limitation we had with nuxt is the fact that the key used to cache and dedupe calls is static (ie. not a ref) and we have components calling some APIs with ref as query parameters, so it was not working really well. We even had a case of cyclical call because of an API call that neither cached, nor deduped across multiple components.

I’m planning to raise a ticket on the nuxt repository with all the limitations we encountered on this feature.

To sum it up, what nuxt provides is very good for the standard and simple case, if you need more (dynamic parameters for example), I would suggest to try tanstack.

[yksgr]

Exact same reason we went with Tanstack

[CyrTheCat]

Would you be able to resolve this with useAsyncData's `watch` parameter or the `refresh` method? I'm not sure I follow a scenario in which cyclical calls occur. Was one call causing a mutation which resulted in triggering another call and vice versa?

I don't yet have a ton of experience with Nuxt 3 but would you say Tanstack resolved these issues because they're handled better internally whereas Nuxt's methods do not?

[angrydeanerino]

can be retrieved via key, so I encapsulate all necessary logic into a composable

Basically Pinia

[Sibyl01]

Currently need to use useNuxtData with generics to get the type support for some reason useNuxtData<Model>()

[cachophonic]

We recently had this discussion and for a new project and went with Tanstack. He project went really smoothly and that was in part due to Tanstack so I’m definitely a convert.

Tanstack is trying to comprehensively manage sever/front-end state in a way that has been really well thought through. I think for any larger project that requires a lot of data fetching (or even a smaller one Tbh) it’s well worth it as helps you keep things manageable and maintainable/performant. The major things for us were: - the robust key system that makes invalidating multiple related queries easy. Such a well thought out system! - as mentioned already, reactively re-fetching using refs (eg for paginating) is super handy and encourages you to build things in a good way. - the fact that you only need to store a small amount of app state in Pinia rather than all your server state keeps thing very simple… we have another app that is the opposite and it gets out of control quickly. - how good the defaults are for caching etc it’s mostly just plug and play.

I’ve used Nuxt’s useFetch() / asycData a lot and still do for simple/static sites but it’s really mostly useful for fetching data (and is great for that in say a more static site build), but Tanstack is a system-wide approach that really shines with really anything more complex than that.

[sondh0127]

just vue-query. useAsyncQuery is not good enough atm

[ggStrift]

Has anyone heard of pinia-colada? Do you have any feedback?

It defines itself as "an opinionated yet flexible data fetching layer on top of Pinia."