How to assign useQuery's "data" to a Pinia composition store Ref?
Hi,
I'm trying to use vue-query with Pinia in order to share data across my app, but still make use of vue-query's great features, such as providing all the different states of fetching and refetching automatically. However, I am not sure if this is an anti-pattern.
In this snippet, "expeses.value" would be of type ObjectRefImp instead of Array which creates some unexepcted results. For example in the "pop()" function I get an Error taht pop is not a method of express.value.
Is there a correct approach to this...? 👀
Thanks!
8 Replies
rare-sapphire•3y ago
I’ve been following the suggestion here (https://github.com/DamianOsipiuk/vue-query/issues/202#issuecomment-1173495122). It took some getting used to but I think it makes perfect sense.
GitHub
Best Practise for working with a store? · Issue #202 · DamianOsipiu...
Hey, Very curious about using this package, I just have a quick question to as if there is any examples or best practices to get this package working with a store eg. Pinia or Vuex. Example of my s...
xenial-black•3y ago
Exactly as mentioned you should not proxy data from vue-query to pinia.
vue-query works as the async data store.
If you need some initial value before the first fetch happens, you could use
placeholderData or initialData.
Also keep in mind that everything returned from useQuery is a ref to preserve reactivity is users ...spread the result. So access it via data.valueambitious-aquaOP•3y ago
Appreciate the input!
What if I would need to modify the data and use it that way somewhere else (another component or script)? I know I can use the "select" property of "useQuery", but as I understand, that is tied to the query itself and won't be reflected in other queries.
xenial-black•3y ago
You can use
useQuery in as many components as you wish. Library will handle request deduplication and data sharing automatically.
Depending on needs either return correct shape from the queryFn if you need the same thing everywhere.
If you need different slice of data from the same remote endpoint you could use select.ambitious-aqua•3y ago
What if the queryKey has a variable dependency? How can I get the cached data in component B if component A calls useQuery with a variable that component B is unaware of?
xenial-black•3y ago
I could see a couple of options but first question...
Why component B wants the data about something that it is unaware of?
Potential solutions is this is really what you want to do:
- use
queryKey that would be distinguishable and do not include that variable in the key
- use queryClient.getQueryData function where you can pass a predicate function and find the query that you need https://tanstack.com/query/latest/docs/vue/reference/QueryClient#queryclientgetquerydataQueryClient | TanStack Query Docs
QueryClient
The QueryClient can be used to interact with a cache:
ambitious-aqua•3y ago
1 component does the fetching, another does the rendering. If I'm not mistaken I can't "watch" qc.getQueryData so if it happens in comp B before the data is fetched, it will return undefined.
xenial-black•3y ago
This is outside of
vue-query scope.
I could ask, how would you do the same thing without vue-query?
You can either extract it to a composable that will get necessary parameters from global store/query params/vue context or you can pass it via props.
If a component is interested in data that it does not know anything about it should probably come via props to the component, not via vue-query hook.