Using vue query with Pinia or Vuex

[marina-mosti]

Hey @DamianOsipiuk , awesome wrapper!

I'm wondering if you have any suggestions or best practices on how to incorporate vue-query with a pinia store for example.

My first thought would be that since it is composition-API based, that any and all actions in the store that are currently making API calls and setting the store state will have to possibly disappear? Then the component will be responsible for making the call and writing the state by watching the data property for changes.

Another possible solution would be to have the action return the Promise without making any changes to the state.

This may realistically be a dead-end I'm exploring, and perhaps Vue query should in itself be functioning and a state solution in itself, which potentially could be provide/injected down to the application from the top level.

Any suggestions and thoughts very appreciated

[DamianOsipiuk]

tl;dr Yes, vue-query should be used as a standalone solution for a server-cache.

I would distinguish 3 types of state in apps currently:

• local state
• global state (lang, global user settings etc.)
• server state (thing that are out of you app control) - this lol

Vue-query compostables should ideally be stored in file outside of the component. Then in any component that needs some server state just use the hook. Requests would be automatically deduplicated and state would be automatically shared between all components that are interested in it.
There is no need to use vuex or pinia with it as it does not give you any benefit. Just additional boilerplate.

You can still use pinia or vuex for your global state though.

[marina-mosti]

Thanks for the detailed reply, makes perfect sense 👌🏻