[Bug]: Impossibility to configure and use @vue/apollo-composable

[Kvn91]

Expected Behavior

Being able to configure and use @vue/apollo-composable to send graphql mutations and queries

Actual Behavior

When configuring and trying to use @vue/apollo-composable, the front is somehow crashing and logging errors :

[Vue warn]: Property "__ob__" must be accessed with "$data.__ob__" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals. See: https://vuejs.org/v2/api/#data

found in

---> <SfSearchBar> at node_modules/@storefront-ui/vue/src/components/molecules/SfSearchBar/SfSearchBar.vue
       <SfHeader> at node_modules/@storefront-ui/vue/src/components/organisms/SfHeader/SfHeader.vue
         <AppHeader> at components/AppHeader.vue
           <Anonymous>
             <LazyHydrate>
               <DefaultLayout> at layouts/default.vue
                 <Root>

[Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <SfHeader> at node_modules/@storefront-ui/vue/src/components/organisms/SfHeader/SfHeader.vue
       <AppHeader> at components/AppHeader.vue
         <Anonymous>
           <LazyHydrate>
             <DefaultLayout> at layouts/default.vue
               <Root>

Possible Solution

Could be a conflict caused by the peer dependency on @vue/composition-api, see https://github.com/nuxt-community/apollo-module/issues/288

Steps to reproduce

Init a new VSF project. Add apollo :

yarn add  @nuxtjs/apollo @vue/apollo-composable

In nuxt.config.js add :

..
import { resolve } from 'path';

..
modules: [
..
'@nuxtjs/apollo'
]
..
plugins: [‘@/plugins/provide-apollo-client’]
..
apollo: {
    clientConfigs: {
        default: {
             httpEndpoint: process.env.GRAPHQL_API,
    },
    },
},
alias: {
    '@vue/composition-api/dist/vue-composition-api.mjs': resolve('./node_modules/@vue/composition-api/dist/vue-composition-api.esm.js'),
}

The alias section is fixing https://github.com/vueuse/vue-demi/issues/106

In /plugins/provide-apollo-client.ts add :

import { Context } from '@nuxt/types';
import { provide, onGlobalSetup, defineNuxtPlugin } from "@nuxtjs/composition-api";
import { DefaultApolloClient } from "@vue/apollo-composable";

/**
 * This plugin will connect @nuxt/apollojs with @vue/apollo-composable
 */

export default defineNuxtPlugin(({ app }: Context): void => {
  onGlobalSetup(() => {
    provide(DefaultApolloClient, app.apolloProvider?.defaultClient);
  });
})

This configuration is the one making nuxt working with apollo-composable according to https://github.com/nuxt-community/apollo-module/issues/288

Launch the front, go on a page, and see errors logging

What version of vendure integration are you using?

1.2.0

What version of Node.js are you using?

v16.15.0

What browser (and version) are you using?

Chrome 103.0.5060.114 (arm64)

What operating system (and version) are you using?

macOS Monterey 12.2.1

Relevant log output

[Vue warn]: Property "__ob__" must be accessed with "$data.__ob__" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals. See: https://vuejs.org/v2/api/#data

found in

---> <SfSearchBar> at node_modules/@storefront-ui/vue/src/components/molecules/SfSearchBar/SfSearchBar.vue
       <SfHeader> at node_modules/@storefront-ui/vue/src/components/organisms/SfHeader/SfHeader.vue
         <AppHeader> at components/AppHeader.vue
           <Anonymous>
             <LazyHydrate>
               <DefaultLayout> at layouts/default.vue
                 <Root>
warn @ vue.runtime.esm.js?2b0e:619
warnReservedPrefix @ vue.runtime.esm.js?2b0e:2035
get @ vue.runtime.esm.js?2b0e:2078
isRaw @ vue-composition-api.esm.js?a6f4:410
defineAccessControl @ vue-composition-api.esm.js?a6f4:440
setupAccessControl @ vue-composition-api.esm.js?a6f4:431
defineAccessControl @ vue-composition-api.esm.js?a6f4:456
setupAccessControl @ vue-composition-api.esm.js?a6f4:431
setterHandler @ vue-composition-api.esm.js?a6f4:486
set @ vue-composition-api.esm.js?a6f4:318
updateTemplateRef @ vue-composition-api.esm.js?a6f4:1352
mounted @ vue-composition-api.esm.js?a6f4:1404
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
forceRender @ vue.runtime.esm.js?2b0e:3668
eval @ vue.runtime.esm.js?2b0e:3690
eval @ vue.runtime.esm.js?2b0e:336
Promise.then (async)
resolveAsyncComponent @ vue.runtime.esm.js?2b0e:3713
createComponent @ vue.runtime.esm.js?2b0e:3219
_createElement @ vue.runtime.esm.js?2b0e:3455
createElement @ vue.runtime.esm.js?2b0e:3374
vm.$createElement @ vue.runtime.esm.js?2b0e:3515
render @ LazyHydrate.esm.js?8416:159
eval @ vue-composition-api.esm.js?a6f4:1425
activateCurrentInstance @ vue-composition-api.esm.js?a6f4:1385
$options.render @ vue-composition-api.esm.js?a6f4:1425
Vue._render @ vue.runtime.esm.js?2b0e:3569
updateComponent @ vue.runtime.esm.js?2b0e:4070
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
mount @ client.js?06a0:741
_callee7$ @ client.js?06a0:726
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
_mountApp @ client.js?06a0:726
mountApp @ client.js?06a0:726
Promise.then (async)
eval @ client.js?06a0:114
eval @ client.js:1303
./.nuxt/client.js @ app.js:35
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
0 @ app.js:1996
__webpack_require__ @ runtime.js:854
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
Show 52 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property "__ob__" must be accessed with "$data.__ob__" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals. See: https://vuejs.org/v2/api/#data

found in

---> <SfSearchBar> at node_modules/@storefront-ui/vue/src/components/molecules/SfSearchBar/SfSearchBar.vue
       <SfHeader> at node_modules/@storefront-ui/vue/src/components/organisms/SfHeader/SfHeader.vue
         <AppHeader> at components/AppHeader.vue
           <Anonymous>
             <LazyHydrate>
               <DefaultLayout> at layouts/default.vue
                 <Root>
warn @ vue.runtime.esm.js?2b0e:619
warnReservedPrefix @ vue.runtime.esm.js?2b0e:2035
get @ vue.runtime.esm.js?2b0e:2078
isRaw @ vue-composition-api.esm.js?a6f4:410
setupAccessControl @ vue-composition-api.esm.js?a6f4:422
defineAccessControl @ vue-composition-api.esm.js?a6f4:456
setupAccessControl @ vue-composition-api.esm.js?a6f4:431
defineAccessControl @ vue-composition-api.esm.js?a6f4:456
setupAccessControl @ vue-composition-api.esm.js?a6f4:431
setterHandler @ vue-composition-api.esm.js?a6f4:486
set @ vue-composition-api.esm.js?a6f4:318
updateTemplateRef @ vue-composition-api.esm.js?a6f4:1352
mounted @ vue-composition-api.esm.js?a6f4:1404
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
forceRender @ vue.runtime.esm.js?2b0e:3668
eval @ vue.runtime.esm.js?2b0e:3690
eval @ vue.runtime.esm.js?2b0e:336
Promise.then (async)
resolveAsyncComponent @ vue.runtime.esm.js?2b0e:3713
createComponent @ vue.runtime.esm.js?2b0e:3219
_createElement @ vue.runtime.esm.js?2b0e:3455
createElement @ vue.runtime.esm.js?2b0e:3374
vm.$createElement @ vue.runtime.esm.js?2b0e:3515
render @ LazyHydrate.esm.js?8416:159
eval @ vue-composition-api.esm.js?a6f4:1425
activateCurrentInstance @ vue-composition-api.esm.js?a6f4:1385
$options.render @ vue-composition-api.esm.js?a6f4:1425
Vue._render @ vue.runtime.esm.js?2b0e:3569
updateComponent @ vue.runtime.esm.js?2b0e:4070
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
mount @ client.js?06a0:741
_callee7$ @ client.js?06a0:726
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
_mountApp @ client.js?06a0:726
mountApp @ client.js?06a0:726
Promise.then (async)
eval @ client.js?06a0:114
eval @ client.js:1303
./.nuxt/client.js @ app.js:35
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
0 @ app.js:1996
__webpack_require__ @ runtime.js:854
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
Show 52 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <SfHeader> at node_modules/@storefront-ui/vue/src/components/organisms/SfHeader/SfHeader.vue
       <AppHeader> at components/AppHeader.vue
         <Anonymous>
           <LazyHydrate>
             <DefaultLayout> at layouts/default.vue
               <Root>
warn @ vue.runtime.esm.js?2b0e:619
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4331
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
forceRender @ vue.runtime.esm.js?2b0e:3668
eval @ vue.runtime.esm.js?2b0e:3690
eval @ vue.runtime.esm.js?2b0e:336
Promise.then (async)
resolveAsyncComponent @ vue.runtime.esm.js?2b0e:3713
createComponent @ vue.runtime.esm.js?2b0e:3219
_createElement @ vue.runtime.esm.js?2b0e:3455
createElement @ vue.runtime.esm.js?2b0e:3374
vm.$createElement @ vue.runtime.esm.js?2b0e:3515
render @ LazyHydrate.esm.js?8416:159
eval @ vue-composition-api.esm.js?a6f4:1425
activateCurrentInstance @ vue-composition-api.esm.js?a6f4:1385
$options.render @ vue-composition-api.esm.js?a6f4:1425
Vue._render @ vue.runtime.esm.js?2b0e:3569
updateComponent @ vue.runtime.esm.js?2b0e:4070
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
hydrate @ vue.runtime.esm.js?2b0e:6422
hydrate @ vue.runtime.esm.js?2b0e:6455
patch @ vue.runtime.esm.js?2b0e:6537
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
mount @ client.js?06a0:741
_callee7$ @ client.js?06a0:726
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
_mountApp @ client.js?06a0:726
mountApp @ client.js?06a0:726
Promise.then (async)
eval @ client.js?06a0:114
eval @ client.js:1303
./.nuxt/client.js @ app.js:35
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
0 @ app.js:1996
__webpack_require__ @ runtime.js:854
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
Show 34 more frames

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Baroshem]

Hey @Kvn91

Thanks for rising that issue. I dont think however that it is caused by the integration itself. You are using a nuxt module in a nuxt based project. The fact that it is triggered in the Storefront UI component means only that it is a first component on a page (not that it is caused by Vue Storefront or Storefront UI)

Not sure, but Vue apollo composable can be meant for the Vue 3 only, while VSF is a Nuxt 2 (Vue 2 in the end).

[Kvn91]

Not sure, but Vue apollo composable can be meant for the Vue 3 only, while VSF is a Nuxt 2 (Vue 2 in the end).

Precisely, it's meant for Vue 2 & 3 (https://v4.apollo.vuejs.org/guide-composable/setup.html)

[Kvn91]

I finally got it working with @vue/apollo-composable@4.0.0-alpha.5, didn't try other versions yet

[Baroshem]

Awesome @Kvn91!

Closing the issue then 🙂