Support Vue 3.0 composition API #1011

lorensr · 2020-07-08T01:46:33Z

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

the-nicolas · 2020-07-21T15:01:43Z

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 · 2020-07-29T07:44:32Z

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

justinwaite · 2020-08-06T16:05:30Z

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 · 2020-08-06T18:34:51Z

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 · 2020-08-06T18:36:20Z

@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 · 2020-08-10T00:51:45Z

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 · 2020-08-11T08:39:13Z

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 · 2020-08-17T13:13:29Z

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 · 2020-08-18T08:44:55Z

Thanks @frandiox

heywhy · 2020-08-24T18:42:49Z

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 · 2020-09-02T15:33:01Z

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}

Akryum · 2020-10-15T15:43:34Z

Full support for Vue 3 is pending the inclusion of onServerPrefetch (currently Vue 3 only has serverPrefetch as a Component option).

frandiox · 2020-10-16T04:28:31Z

@Akryum Could you please release v4.0.0-alpha.11 with the latest updates? It should make it work for SPAs at least since all the changes related to this patch are already merged. Thanks!

Akryum · 2020-10-17T13:13:42Z

Vue 3 support for @vue/apollo-composable is now included in automatic tests on v4 branch. (More tests to come)

folke · 2020-10-18T13:13:15Z

Updated patch for v4.0.0-alpha.12 to make Vite happy:

const fs = require("fs")
const path = require("path")

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

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

fs.writeFileSync(
  useQueryPath,
  fs.readFileSync(useQueryPath, "utf8").replace(/^onServerPrefetch, /mu, "")
)

Stijn98s · 2020-10-22T10:52:34Z

Updated patch to fully remove onServerPrefetch to make it work with vite.

vite: 1.0.0-rc4
vue: 3.0.2
graphql: 15.3.0
@apollo/client: 3.2.5
@vue/apollo-composable: 4.0.0-alpha.12

const fs = require("fs")
const path = require("path")

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

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

const vueApolloComposablePath = path.resolve(
  __dirname,
  "../node_modules/@vue/apollo-composable/dist/vue-apollo-composable.js"
)

fs.writeFileSync(
  useQueryPath,
  fs.readFileSync(useQueryPath, "utf8").replace(/^onServerPrefetch, /mu, "")
)

fs.writeFileSync(
  useQueryPath,
  fs.readFileSync(useQueryPath, "utf8").replace(/onServerPrefetch === null.*?\}\);/mus, "")
)

fs.writeFileSync(
  vueApolloComposablePath,
  fs.readFileSync(vueApolloComposablePath, "utf8").replace(/vue_demi_5.onServerPrefetch === null.*?\}\);/mus, "")
)

matthewkeil · 2020-11-18T03:04:22Z

This is what ended up working for me

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(/\:\sonServerPrefetch\(/, ": (() => {})(")
    .replace(/(.* require\("vue"\);)/m, "")
);

seyhadot · 2020-11-27T07:02:48Z

it's not working for me with my version
"@apollo/client": "^3.2.9",
"@vue/apollo-composable": "^4.0.0-alpha.12",
"core-js": "^3.6.5",
"graphql": "^15.4.0",
"react": "^17.0.1",
"vue": "^3.0.0",

and still get this error can anyone tell me what should i do with this error


 ERROR  Failed to compile with 1 errors                                                                                                             1:59:59 PM

 error  in ./node_modules/@vue/apollo-composable/dist/useQuery.js

Module parse failed: Unexpected token (14:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { ref, isRef, computed, watch, 
| // @ts-expect-error
> vue_demi_1.nextTick, } from 'vue-demi';
| import { throttle, debounce } from 'throttle-debounce';
| import { useApolloClient } from './useApolloClient';

 @ ./node_modules/@vue/apollo-composable/dist/index.js 1:0-39 1:0-39
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.198:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

lorensr · 2020-12-15T16:18:07Z

@seyhadot not sure, you could create a new issue. Here's a small working app you can use to try to reproduce with: https://github.com/GraphQLGuide/guide-vue/tree/repro-1116

NagamineYusuke · 2021-02-28T14:11:40Z

it's not working for me with my version
"@apollo/client": "^3.2.9",
"@vue/apollo-composable": "^4.0.0-alpha.12",
"core-js": "^3.6.5",
"graphql": "^15.4.0",
"react": "^17.0.1",
"vue": "^3.0.0",

and still get this error can anyone tell me what should i do with this error


 ERROR  Failed to compile with 1 errors                                                                                                             1:59:59 PM

 error  in ./node_modules/@vue/apollo-composable/dist/useQuery.js

Module parse failed: Unexpected token (14:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { ref, isRef, computed, watch, 
| // @ts-expect-error
> vue_demi_1.nextTick, } from 'vue-demi';
| import { throttle, debounce } from 'throttle-debounce';
| import { useApolloClient } from './useApolloClient';

 @ ./node_modules/@vue/apollo-composable/dist/index.js 1:0-39 1:0-39
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.198:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I had the same thing happen to me.
But I replaced it with this package.json and it was fixed, thanks.

@seyhadot not sure, you could create a new issue. Here's a small working app you can use to try to reproduce with:
https://github.com/GraphQLGuide/guide-vue/tree/repro-1116

squidsoup · 2021-03-01T23:53:55Z


 ERROR  Failed to compile with 1 errors                                                                                                             1:59:59 PM

 error  in ./node_modules/@vue/apollo-composable/dist/useQuery.js

Module parse failed: Unexpected token (14:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { ref, isRef, computed, watch, 
| // @ts-expect-error
> vue_demi_1.nextTick, } from 'vue-demi';
| import { throttle, debounce } from 'throttle-debounce';
| import { useApolloClient } from './useApolloClient';

 @ ./node_modules/@vue/apollo-composable/dist/index.js 1:0-39 1:0-39
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.198:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I had the same thing happen to me.
But I replaced it with this package.json and it was fixed, thanks.

@NagamineYusuke sorry, would you mind explaining your fix please? It isn't clear what you did to get alpha12 working.

folke · 2021-03-03T09:46:55Z

@squidsoup @NagamineYusuke

This little script patches it, to make it work with vite.

const fs = require("fs")
const path = require("path")

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

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

fs.writeFileSync(
  useQueryPath,
  fs.readFileSync(useQueryPath, "utf8").replace(/^onServerPrefetch, /mu, "")
)

araratmartirossyan · 2021-03-25T15:30:36Z

When the fix will come?

killix · 2021-05-06T16:07:34Z

This one is safer.

const fs = require("fs");
const path = require("path");

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

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

fs.writeFileSync(
  useQueryPath,
  fs
    .readFileSync(useQueryPath, "utf8")
    .replace(/\/\/ @ts-expect-error.*[\r\n]+(onServerPrefetch),/m, "// $1,\n")
    .replace(/export function/m, "\n\rimport * as VueDemi from 'vue-demi';\nconst onServerPrefetch = VueDemi.onServerPrefetch;\n\rexport function")
);

Cardoso-topdev · 2021-07-15T11:38:00Z

I have this error.

 error  in ./node_modules/@vue/apollo-composable/dist/index.esm.js

Module parse failed: Unexpected token (19:103)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var ApolloClients = Symbol("apollo-clients");
| function resolveDefaultClient(providedApolloClients, providedApolloClient) {
>   const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;       
|   return resolvedClient;
| }

 @ ./src/main.js 7:0-55 28:14-27
 @ multi (webpack)-dev-server/client?http://10.10.10.50:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

How can I solve this problem?

stique · 2021-07-20T04:38:55Z

I have this error.

 error  in ./node_modules/@vue/apollo-composable/dist/index.esm.js

Module parse failed: Unexpected token (19:103)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var ApolloClients = Symbol("apollo-clients");
| function resolveDefaultClient(providedApolloClients, providedApolloClient) {
>   const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;       
|   return resolvedClient;
| }

 @ ./src/main.js 7:0-55 28:14-27
 @ multi (webpack)-dev-server/client?http://10.10.10.50:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

How can I solve this problem?

I solved this with adding the following code to build section of nuxt-config:

transpile : ['@vue/apollo-composable',],

Hope this helps.

Akryum · 2021-07-20T08:22:42Z

This should be unnecessary with alpha.14

Cardoso-topdev · 2021-07-20T19:41:47Z

I have this error.

 error  in ./node_modules/@vue/apollo-composable/dist/index.esm.js

Module parse failed: Unexpected token (19:103)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var ApolloClients = Symbol("apollo-clients");
| function resolveDefaultClient(providedApolloClients, providedApolloClient) {
>   const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;       
|   return resolvedClient;
| }

 @ ./src/main.js 7:0-55 28:14-27
 @ multi (webpack)-dev-server/client?http://10.10.10.50:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

How can I solve this problem?

I am using vue 3.0 and "@vue/apollo-composable": "^4.0.0-alpha.12"
It works on local environment, but doesn't work on AWS server.
This error message is from server.
Would you like to solve this problem?

lorensr added the enhancement label Jul 8, 2020

lzurbriggen mentioned this issue Aug 10, 2020

apollo-composable "import not found: DefaultApolloClient" #1029

Closed

frandiox mentioned this issue Aug 17, 2020

Vue 3 compatibility #972

Closed

parion mentioned this issue Sep 7, 2020

onServerPrefetch does not exist in Vue 3 #1042

Closed

Akryum added the v4 label Oct 15, 2020

elevatebart mentioned this issue Oct 17, 2020

List of central vue libraries with their Vue3 compatibility status sonicoder86/awesome-vue-3#30

Closed

Akryum closed this as completed Oct 17, 2020

Akryum mentioned this issue Oct 17, 2020

Support Apollo 3 #1015

Closed

elevatebart mentioned this issue Oct 20, 2020

Vue3 compatibility status of central vue libraries vuejs/awesome-vue#3544

Open

agualis mentioned this issue Dec 12, 2020

docs: Add example for Apollo GraphQL + composition API testing-library/vue-testing-library#192

Merged

lorensr mentioned this issue Dec 15, 2020

Fix apollo-composable peer deps #1116

Closed

reaink mentioned this issue Mar 9, 2021

export 'onServerPrefetch' was not found in 'vue-demi' #1102

Closed

tobiasdiez mentioned this issue Jul 7, 2021

Upgrade to Vue 3 JabRef/JabRefOnline#7

Closed

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Vue 3.0 composition API #1011

Support Vue 3.0 composition API #1011

lorensr commented Jul 8, 2020

the-nicolas commented Jul 21, 2020

MechJosh0 commented Jul 29, 2020

justinwaite commented Aug 6, 2020

MechJosh0 commented Aug 6, 2020 •

edited

Loading

justinwaite commented Aug 6, 2020

szvest commented Aug 10, 2020 •

edited

Loading

lzurbriggen commented Aug 11, 2020

frandiox commented Aug 17, 2020 •

edited

Loading

Maxhodges commented Aug 18, 2020

heywhy commented Aug 24, 2020 •

edited

Loading

ivansieder commented Sep 2, 2020

Akryum commented Oct 15, 2020

frandiox commented Oct 16, 2020

Akryum commented Oct 17, 2020

folke commented Oct 18, 2020

Stijn98s commented Oct 22, 2020

matthewkeil commented Nov 18, 2020

seyhadot commented Nov 27, 2020

lorensr commented Dec 15, 2020

NagamineYusuke commented Feb 28, 2021

squidsoup commented Mar 1, 2021 •

edited

Loading

folke commented Mar 3, 2021

araratmartirossyan commented Mar 25, 2021

killix commented May 6, 2021

Cardoso-topdev commented Jul 15, 2021

stique commented Jul 20, 2021

Akryum commented Jul 20, 2021

Cardoso-topdev commented Jul 20, 2021

Support Vue 3.0 composition API #1011

Support Vue 3.0 composition API #1011

Comments

lorensr commented Jul 8, 2020

the-nicolas commented Jul 21, 2020

MechJosh0 commented Jul 29, 2020

justinwaite commented Aug 6, 2020

MechJosh0 commented Aug 6, 2020 • edited Loading

justinwaite commented Aug 6, 2020

szvest commented Aug 10, 2020 • edited Loading

lzurbriggen commented Aug 11, 2020

frandiox commented Aug 17, 2020 • edited Loading

Maxhodges commented Aug 18, 2020

heywhy commented Aug 24, 2020 • edited Loading

ivansieder commented Sep 2, 2020

Akryum commented Oct 15, 2020

frandiox commented Oct 16, 2020

Akryum commented Oct 17, 2020

folke commented Oct 18, 2020

Stijn98s commented Oct 22, 2020

matthewkeil commented Nov 18, 2020

seyhadot commented Nov 27, 2020

lorensr commented Dec 15, 2020

NagamineYusuke commented Feb 28, 2021

squidsoup commented Mar 1, 2021 • edited Loading

folke commented Mar 3, 2021

araratmartirossyan commented Mar 25, 2021

killix commented May 6, 2021

Cardoso-topdev commented Jul 15, 2021

stique commented Jul 20, 2021

Akryum commented Jul 20, 2021

Cardoso-topdev commented Jul 20, 2021

MechJosh0 commented Aug 6, 2020 •

edited

Loading

szvest commented Aug 10, 2020 •

edited

Loading

frandiox commented Aug 17, 2020 •

edited

Loading

heywhy commented Aug 24, 2020 •

edited

Loading

squidsoup commented Mar 1, 2021 •

edited

Loading