Vue-apollo: Vue 3 compatibility

[khaledosman]

Describe the bug
When running
vue add apollo
it fails with this error

🚀  Invoking generator for vue-cli-plugin-apollo...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at newTransform (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-jscodeshift-adapter/src/jscodeshift-mode.js:9:14)
    at runCodemod (/usr/local/lib/node_modules/@vue/cli/lib/util/runCodemod.js:29:26)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:109:3)

After doing the manual setup instead, the app throws this error

vue-apollo.esm.js?522d:2020 Uncaught TypeError: Cannot read property 'substr' of undefined
    at Function.install (vue-apollo.esm.js?522d:2020)
    at Object.use (runtime-core.esm-bundler.js?5c40:2110)
    at eval (main.js?56d7:11)
    at Module../src/main.js (app.js:1358)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1491)
    at __webpack_require__ (app.js:854)
    at checkDeferredModules (app.js:46)
    at app.js:994

or

vue-apollo.esm.js?522d:3618 Uncaught TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)
    at Function.install (vue-apollo.esm.js?522d:3618)
    at Object.use (runtime-core.esm-bundler.js?5c40:2110)
    at eval (main.js?56d7:11)
    at Module../src/main.js (app.js:1358)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1491)
    at __webpack_require__ (app.js:854)
    at checkDeferredModules (app.js:46)

To Reproduce
vue create app
vue add vue-next
vue add vue-apollo
or check this sample repo https://github.com/khaledosman/learning-vue

Expected behavior

Versions
vue: 3.0.0-beta.1
vue-apollo: 3.0.3
apollo-client: apollo-boost v0.4.7

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import VueApollo from 'vue-apollo'
import { apolloClient } from './apollo'
const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})
createApp(App, { apolloProvider })
  .use(VueApollo)
  .use(router)
  .use(store)
  .mount('#app')

[ozguruysal]

Because version 3.x is not supposed to work with Vue 3. There's version 4 (See releases) which is in alpha stage and that's what you're looking for. Sadly it's not yet working with Vue 3 but only with Vue 2 + vue-composition-api plugin.

[khaledosman]

Is there anyway I can try out the new version? I can't seem to find it listed on npm

[ozguruysal]

@khaledosman you can use yarn add vue-apollo@next or npm install vue-apollo@next. You can read more here to learn about installing specific package versions.

[MarvinRudolph]

Is there currently a version which works with Vue 3?

[LiuG-lynx]

I use yarn add vue-apollo@next to report an error Uncaught TypeError: Object.defineProperty called on non-object @ozguruysal

[frandiox]

Might be useful: https://github.com/vuejs/vue-apollo/issues/1011#issuecomment-674873671

[abdullahyaqoob]

vue3 is giving this error because vue3 is in beta version if you use vue2 you solve your problem. My error is solved by this solution.

[lancegliser]

@khaledosman you can use yarn add vue-apollo@next or npm install vue-apollo@next. You can read more here to learn about installing specific package versions.

npm install vue-apollo@next is actually set at 3.0.0-alpha.3. That might explain your issue @abdullahyaqoob, you've downgraded. https://www.npmjs.com/package/vue-apollo

I don't find any 4.x packages published right now to work with.

[BeeeQueue]

@lancegliser The new v4 versions are released in new packages as you can see in the new v4 docs (links wayyy at the bottom):

https://v4.apollo.vuejs.org/guide/installation.html#next-steps

[lancegliser]

@BeeeQueue The primary install documentation on that page points me to the plugin. In the generator function for that plugin, I see it trying to install vue-apollo@^3.0.0-beta.11 at this time.

Looking at the section for next steps I just don't see any new packages listed. Even if there were, the plugin wouldn't appear to install them. I think I'm missing something you're referring to. Could you elaborate please?

[BeeeQueue]

The plugin hasn't been updated to support Vue 3 or vue-apollo 4, and the docs referring to the plugin can therefore also not been updated yet.

Simply click on the links at the bottom and it will tell you how to use and install each of the packages that have been created.

[MarvinRudolph]

@noobling That's not Vue 3. It's Vue 2 + Composition API plugin.

[noobling]

@MarvinRudolph I made a working vue3 example here https://github.com/noobling/vue3-apollo-example/blob/master/src/main.js its not too hard to do. The key is the patch. Im sure you can improve the example if so please make a contrib.

[Drakota]

@noobling Thank you for this!
Since I was using vite, I tried to make your example work and I had some issues.
If anyone is interested, I've made a repository inspired by noobling on how to use vue-apollo with vite!
https://github.com/Drakota/vue3-vite-apollo-example

[Akryum]

See https://github.com/vuejs/vue-apollo/issues/1011#issuecomment-710942324

[gmeben]

Closing an issue before it's resolved on a tagged release of the master branch is bad practice.

Please keep issues open until they're actually fixed.

[incompletude]

Well, let's try react.

[laddi-netapp]

I'm getting the same/similar Object.defineProperty error when trying to use @vue/apollo-option with my Vue3 project. Specifically, this error:

Uncaught (in promise) TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)
    at Function.install (vue-apollo-option.esm.js?4cc9:1736)
    at Object.use (runtime-core.esm-bundler.js?5c40:2945)

What I would like to see is a) these packages actually working with Vue 3 and b) documentation that showed how to set it up (if they already do work).

And I agree, closing this issue when it clearly isn't resolved is very odd...

[andreasmalaer]

What I would like to see is a) these packages actually working with Vue 3 and b) documentation that showed how to set it up (if they already do work).

@laddi-netapp @vue/apollo-composable works with Vue 3 and the following repo shows how https://github.com/GraphQLGuide/guide-vue

[laddi-netapp]

That's all fine and dandy, but I'm trying to use @vue/apollo-option, for now it is way too much work for me to transform my existing project to use @vue/composable even though that is the ultimate goal...