Support Vue 3.0 composition API

[lorensr]

According to the Vue roadmap, the API for v3.0 is now frozen.

[the-nicolas]

This is really a major problem. We had to move many projects to react during the last month, because we were not able to go with vue 3. We did many poc and in general vue3 was doing already great. Just the missing graphql and some typescript problems killed the approach.

[MechJosh0]

vue-apollo v4 has been available since early December 2019, with v4.0.0-alpha.10 having been released 2 days ago.

[justinwaite]

vue-apollo v4 has been available since early December 2019, with v4.0.0-alpha.10 having been released 2 days ago.

True, but this doesn't support Vue 3, just Vue 2 with the composition api plugin.

[MechJosh0]

From my understanding it can be used with vue 3. Have you tested, @justinwaite?

I do use it with composition api because storybook is the last thing holding me back from upgrading to vue 3. So I've not tested myself, but I believe it is compatible in the latest version.

Its latest version was released with using a package which allows vue apollo 4 to be used with either vue 2 or vue 3.

[justinwaite]

@MechJosh0 there may be multiple things at play here, but I am unable to get it working with Vue 3 + Vite. See my comment here: #1029 (comment)

[szvest]

It does work with Composition API but the thing is that it only does up to composition-api@0.5.0 (see issue here). I had v4.0.0-alpha.8 and composition-api@0.5.0 working fine.

However, it gives this error after upgrading to v4.0.0-alpha.10
[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

[lzurbriggen]

From what I can tell at least @vue/apollo-composable use features of the composition-api/Vue2 that are simply not available in Vue3 (onServerPrefetch/serverPrefetch , vm.$isServer). I can't find much regarding Vue3 SSR so I don't think there's a 1-to-1 replacement for the SSR API.

[frandiox]

v4.0.0-alpha.10 is supposed to work with Vue 3 since it adds vue-demi to automatically toggle between @vue/composition-api (Vue 2) and Vue 3.

However, I've found a couple of issues with it: #1041 #1040

With those two changes I got it working. Until they are merged or refactored by Guillaume, you can try this patch:

// scripts/vue-apollo-patch.js

const fs = require('fs')
const path = require('path')

const loadTrackingPath = path.resolve(
  __dirname,
  '../node_modules/@vue/apollo-composable/dist/util/loadingTracking.js'
)

fs.writeFileSync(
  loadTrackingPath,
  fs.readFileSync(loadTrackingPath, 'utf8').replace(/\.\$root/m, '.root')
)

const useQueryPath = path.resolve(
  __dirname,
  '../node_modules/@vue/apollo-composable/dist/useQuery.js'
)

fs.writeFileSync(
  useQueryPath,
  fs
    .readFileSync(useQueryPath, 'utf8')
    .replace(/(^.*onServerPrefetch)/m, '$1=()=>{}; $1')
    .replace(/(.* require\("vue"\);)/m, '')
    .replace(/^.*(nextTick)/m, 'vue_demi_1.$1')
)

In package.json:

"scripts": {
  "postinstall": "node scripts/vue-apollo-patch.js"
}

Just make sure the paths in the script point to the right files (in case node_modules is not in the parent directory).

Hope that helps!

[Maxhodges]

Thanks @frandiox

[heywhy]

v4.0.0-alpha.10 is supposed to work with Vue 3 since it adds vue-demi to automatically toggle between @vue/composition-api (Vue 2) and Vue 3.

However, I've found a couple of issues with it: #1041 #1040

With those two changes I got it working. Until they are merged or refactored by Guillaume, you can try this patch:

// scripts/vue-apollo-patch.js

const fs = require('fs')
const path = require('path')

const loadTrackingPath = path.resolve(
  __dirname,
  '../node_modules/@vue/apollo-composable/dist/util/loadingTracking.js'
)

fs.writeFileSync(
  loadTrackingPath,
  fs.readFileSync(loadTrackingPath, 'utf8').replace(/\.\$root/m, '.root')
)

const useQueryPath = path.resolve(
  __dirname,
  '../node_modules/@vue/apollo-composable/dist/useQuery.js'
)

fs.writeFileSync(
  useQueryPath,
  fs
    .readFileSync(useQueryPath, 'utf8')
    .replace(/(^.*onServerPrefetch)/m, '$1=()=>{}; $1')
    .replace(/(.* require\("vue"\);)/m, '')
    .replace(/^.*(nextTick)/m, 'vue_demi_1.$1')
)

In package.json:

"scripts": {
  "postinstall": "node scripts/vue-apollo-patch.js"
}

Just make sure the paths in the script point to the right files (in case node_modules is not in the parent directory).

Hope that helps!

The quoted reply fails because the onServerPrefetch property can't be resigned on a freezed object. The below snippet solves the issue:

const fs = require('fs')
const path = require('path')

const loadTrackingPath = path.resolve(
  __dirname,
  '../node_modules/@vue/apollo-composable/dist/util/loadingTracking.js'
)

fs.rmdirSync(path.resolve(__dirname, '../node_modules/.vite_opt_cache'), {
  recursive: true
})

fs.writeFileSync(
  loadTrackingPath,
  fs.readFileSync(loadTrackingPath, 'utf8').replace(/\.\$root/m, '.root')
)

const useQueryPath = path.resolve(
  __dirname,
  '../node_modules/@vue/apollo-composable/dist/useQuery.js'
)

fs.writeFileSync(
  useQueryPath,
  fs
    .readFileSync(useQueryPath, 'utf8')
    .replace(/(^.*onServerPrefetch)(\.\?\.)?/m, '$1?.')
    .replace(/(.* require\("vue"\);)/m, '')
    .replace(/^.*(nextTick)/m, 'vue_demi_1.$1')
)

[ivansieder]

It does work with Composition API but the thing is that it only does up to composition-api@0.5.0 (see issue here). I had v4.0.0-alpha.8 and composition-api@0.5.0 working fine.

However, it gives this error after upgrading to v4.0.0-alpha.10
[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

For me this issue got resolved by putting Vue.use(VueCompositionAPI) into an external file (the same one where I'm setting up Apollo) and then importing it in the main.{ts,js}