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

Uh oh!

Support Vue 3.0 composition API #1011

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions