apollo: Question / missing doc: How to use this with Vue 3 and composition API
I’m getting quite confused. On the official page it’s statet, that it’s “Compatible with Vue 2.0+ and 3.0+.” so I tried to get it work with Vue 3 but there seems to be no documentation for it. I already found https://v4.apollo.vuejs.org/guide/installation.html#vue-cli-plugin and https://v4.apollo.vuejs.org/guide-composable/setup.html but those docs seem to aim at the @vue/composition-api for Vue 2.
It’s also not really clear to me what role plays @vue/apollo-composable I guessed it’s for usage in combination with Vue 2 and @vue/composition-api.
So far I started with something like this, but I can’t find a proper way to import and use useQuery in the components. What am I missing here?
main.ts
import { createApp } from 'vue'
import { router } from './router'
import { store } from './store'
import App from './App.vue'
import ApolloClient from 'apollo-boost'
import VueApollo from 'vue-apollo'
const token = 'secret_stuff...'
const apolloClient = new ApolloClient({
uri: 'http://localhost:4000/graphql',
headers: {
authorization: `Bearer ${token}`
}
})
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
createApp(App)
.use(router)
.use(store)
.use(apolloProvider)
.mount('#app')
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 8
- Comments: 21 (9 by maintainers)
Are you questioning what
<script setup>syntax is, or are you asking why doesn’t Vue Apollo v4 discuss<script setup>syntax?This is
<script setup>: https://v3.vuejs.org/api/sfc-script-setup.html Vue Apollo v4 doesn’t need to go over Vue 3 syntax, it needs to go over Vue Apollo v4 documentation on how to use it with Vue 3. Understanding Vue 3 is a Vue 3 documentation job and you should look there for help on that if that’s what you’re asking.<script setup>is just a preference of how to write. You can use it if you want but you need to read the Vue 3 documentation on it to understand how to use it. It isn’t Vue Apollo’s job to show multiple ways of writing the same thing to suit everyone’s preference.@smolinari Could you share a link to a project that implements the combination ‘vue-apollo 4 + vuejs 3’? I could not find anything completely workable until now.
I’m getting this error when trying to set up Apollo4 in the webpack preview project:
Seems like that package is specifically designed to work with
@vue/composition-apinot the composition api invue-next. Has anyone else had any luck getting vue apollo working in vue 3?The docs are already updated with Vue 3 instructions.
https://v4.apollo.vuejs.org/guide-option/setup.html#_1-install-vue-apollo-option https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3 https://v4.apollo.vuejs.org/guide-components/setup.html#_4-add-the-provider-to-your-app
I haven’t found anywhere that describes
<script setup>syntax yet. I find the Apollo docs quite inadequate for Vue 3.Well, vue-apollo should work with Vue 3, but not with the composition API. Just within the options API. 😄
And, that guy’s project should also work with Vue 3’s composition API too. You need vue-apollo version 4 to do that. So…
vue-apollo version 3 works with Vue 2 or 3 (but only with the options API).
vue-apollo version 4 works with Vue 2 and the composition API plug-in or Vue 3.
Scott
Thanks @smolinari I already discovered this awesome project, it seems like he is doing a lot right, but he is using Vue 2 and I actually wanted to use it with Vue 3.
Never mind for now, since I canceled the Vue 3 plan, also due to other issues, it was just confusing me, that the doc stated explicitly, tat it works with Vue 2+ and Vue 3+ …
Take a look at what this guy is doing. https://github.com/Datlyfe/jira_clone
Scott