Vue 3 & Apollo Composable - Are we obliged to call useMutation and useQuery inside setup()

Question

I am new in Vue 3 and Apollo Composable. I first created a Vuex store and a module service to fetch data from GraphQL endpoint. Furthermore, I noticed during implementation that I can't call useMutation and useQuery outside of setup().

Can I have more explanations about that and also if there are other ways to use useQuery and useMutation outside of setup() can you please show them to me ?

score 4 · Answer 1 · answered Jun 13 '21 at 11:47

4

Yes. You can use provideApolloClient to get access of it outside of a component. You can do it like this:

import { provideApolloClient } from '@vue/apollo-composable'
import { defaultClient } from '../../vue-apollo';
import { useQuery, useResult, useLazyQuery } from '@vue/apollo-composable'

provideApolloClient(defaultClient)

The import of defaultClient from vue-apollo file is my own file, were I have defined HttpLink and ApolloClient that uses that HttpLink. Feel free to ping me, if you need clarification.

answered Jun 13 '21 at 11:47

joelmandell

68
9

Why are you importing from another file. The default client should be accessible from Vue instance right ? – Cedric Achi Jun 15 '21 at 09:04
2

useQuery works this way but useMutation does not. There is different solution where i can use mutation outside of setup() vue component? – LukasGur Jun 25 '21 at 12:02
1

@LukasGur They have fixed it now with vue-apollo v4 alpha 16: https://github.com/vuejs/vue-apollo/issues/1262 – joelmandell Nov 28 '21 at 22:04
This is awesome. Thanks buddies – Cedric Achi Mar 24 '22 at 09:13

Vue 3 & Apollo Composable - Are we obliged to call useMutation and useQuery inside setup()

1 Answers1