Question / missing doc: How to use this with Vue 3 and composition API

[karladler]

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')

[smolinari]

Take a look at what this guy is doing. https://github.com/Datlyfe/jira_clone

Scott

[karladler]

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+ ...

[smolinari]

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

[MassiCav]

@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.

[smolinari]

Theoretically, the jira clone project mentioned above should work with Vue 3. Try it out. :)

Scott

[karladler]

Well, vue-apollo should work with Vue 3, but not with the composition API. Just within the options API. 😄

That's not what I would call "work with Vue 3", since composition API is what most of people take as Vue 3 😉

[smolinari]

Then check out Vue Apollo Version 4. @karladler

Scott

[karladler]

@smolinari I tried so, but I got stuck because of missing docs using v4 in combination with Vue 3, as mentioned in my first request. I'll think I'll wait just a few weeks til things sorted out 🙂

[smolinari]

Try getting Vue 3 running with this package. https://github.com/vuejs/vue-next-webpack-preview

Then install Vue-Apollo 4 and see what happens. 😃

Scott

[MartinodF]

I tried modifying @vue/apollo-composable to work with Vue 3, but it appears there's quite a lot of work to do (even ignoring Apollo Client 3, which is also incompatible) and that it would be impossible to have a single codebase compatible with both Vue 2 + composition API and Vue 3.

Personally, I would love to start playing around with Vue 3 + Vue Apollo 4 + Apollo Client 3 to test the waters and explore the upcoming ecosystem, but I am not sure what's the current roadmap for vue-apollo. Does anybody want to weigh in?

[smolinari]

Only @Akryum would know. 😃

Scott

[onx2]

Try getting Vue 3 running with this package. https://github.com/vuejs/vue-next-webpack-preview

Then install Vue-Apollo 4 and see what happens.

I'm getting this error when trying to set up Apollo4 in the webpack preview project:

Module not found: Error: Can't resolve '@vue/composition-api' in...

Seems like that package is specifically designed to work with @vue/composition-api not the composition api in vue-next. Has anyone else had any luck getting vue apollo working in vue 3?

[mekhami]

@onx2 I've encountered the same problems, and don't think there's a solution yet. Akryum's probably gonna have to clarify.

[Manborough]

I tried modifying @vue/apollo-composable to work with Vue 3, but it appears there's quite a lot of work to do (even ignoring Apollo Client 3, which is also incompatible) and that it would be impossible to have a single codebase compatible with both Vue 2 + composition API and Vue 3.

Personally, I would love to start playing around with Vue 3 + Vue Apollo 4 + Apollo Client 3 to test the waters and explore the upcoming ecosystem, but I am not sure what's the current roadmap for vue-apollo. Does anybody want to weigh in?

@MartinodF

vue-apollo v4 works fine with Apollo Client 3 as far as I can tell. I've had no issues yet, besides the fact that client 3 seems to require react.

[smolinari]

@Manborough - Do you see the React requirement as an issue? I thought they only had React as an optional peer dependency.

Scott

[Manborough]

I remember it not working without it, but I make a lot of mistakes.

I'd rather not have to package features I don't use.

On Sun, 10 May 2020, 3:21 pm Scott, notifications@github.com wrote:

@Manborough https://github.com/Manborough - Do you see the React requirement as an issue? I thought they only had React as an optional peer dependency.

Scott

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-apollo/issues/942#issuecomment-626275390, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFSKRDKV6EST5FQYF6OMCTLRQY2U7ANCNFSM4LTUMSUQ .

[MartinodF]

@Manborough React is listed as an optional peer dependency in Apollo Client 3.0.0-beta.46. If I understood their documentation correctly, one is expected to import from @apollo/client when using React or from @apollo/client/core otherwise.

Anyway, Vue Apollo 4 is still using Apollo Client 2 (see #917), so the point is irrelevant at the moment. This issue relates to using Vue Apollo 4 via @vue/apollo-composable with Vue 3, which is also not supported at the moment.

[catherineluse]

This article helped me. https://www.learmoreseekmore.com/2021/08/vue3-consume-graphql-endpoint-using-vue-apollo.html It uses @vue/apollo-option so you get something like this:

import { createApp } from 'vue'
import App from "./App.vue";
import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import { createApolloProvider } from "@vue/apollo-option";

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const apolloClient = new ApolloClient({
  uri: "[graphql endpoint]",
  cache,
})

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
});

const app = createApp(App)
    .use(apolloProvider)
    .mount("#app");

[Akryum]

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

[agm1984]

I haven't found anywhere that describes <script setup> syntax yet. I find the Apollo docs quite inadequate for Vue 3.

[MechJosh0]

I haven't found anywhere that describes <script setup> syntax yet. I find the Apollo docs quite inadequate for Vue 3.

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.