Error with Vue 3 Composition API

[cyberco]

I'm trying to get vue-apollo up and running using:

vue: 3
apollo/client: "^3.3.7"
vue/apollo-composable: "^4.0.0-alpha.12"
vue/composition-api: "^1.0.0-rc.1"
graphql: "^15.5.0"
graphql-tag: "^2.11.0"

Using the following simple Vue app (CompositionAPI) that follows the guide for composable API:

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

const httpLink = createHttpLink({
  uri: 'https://countries.trevorblades.com/',
})
const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

export default {
    name: 'App',
    setup () {
        provide(DefaultApolloClient, apolloClient)
    },
}

But this throws:

Uncaught TypeError: Cannot read property 'util' of undefined
    at warn (vue-composition-api.esm.js?a6f4:67)
    at currentVMInFn (vue-composition-api.esm.js?a6f4:211)
    at provide (vue-composition-api.esm.js?a6f4:1212)
    at setup (VM50944 App.vue:21)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6419)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6380)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4118)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)
    at patch (runtime-core.esm-bundler.js?5c40:3712)

[ennjoy]

Same problem when installing @vue/apollo-composable package.

[doabit]

Don't need import { provide } from '@vue/composition-api'

import { provide } from 'vue'

[Manubi]

Don't need import { provide } from '@vue/composition-api'

import { provide } from 'vue'

That's actually also what I have. I import provide from vue. That also makes me think why you would need to install vue/composition-api if you're using vue3?

I mean the console is complaining but everything seems to work so far... Does anyone know?

I have the following code, which works for me:

import {
  ApolloClient,
  createHttpLink,
  InMemoryCache
} from "@apollo/client/core";
import { ApolloClients } from "@vue/apollo-composable";
import { createApp, h, provide } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const cache = new InMemoryCache();

const apolloPrivateClient = new ApolloClient({
  link: createHttpLink({ uri: "/internal/api/graphql" }),
  cache
});

const apolloPublicClient = new ApolloClient({
  link: createHttpLink({ uri: "/api/graphql" }),
  cache
});

createApp({
  setup() {
    provide(ApolloClients, {
      default: apolloPublicClient,
      private: apolloPrivateClient
    });
  },
  render() {
    return h(App);
  }
})
  .use(store)
  .use(router)
  .mount("#app");

[holtergram]

I don't remember the specifics but getting Vue Apollo to work is kind of hacky. As suggested in this video at some point you'd have to npm install react to get it working. I don't know if this is still required thou.

[Akryum]

If you import from @apollo/client/core, you should be fine not installing react.

[Manubi]

True that, react is not needed but are there any fixes to get rid of the errors?

[simultsop]

@Manubi if you type in like npm install --save @vue/apollo-composable --force, or --legacy-peer-deps;
that will ignore peer-deps.

[simultsop]

If you import from @apollo/client/core, you should be fine not installing react.

Not that it is the way to go, but perhaps when you attempt to catch some errors during the link.
Using ApolloLink class and try to make an ApolloClient using an error handler and an httplink with ApolloLink like:
const client = new ApolloClient({ link: ApolloLink.from([linkError, link]), cache, })

Not that vue-apollo does but apollo itself requires react as dependency, sadly it relies on it at some ends.

[bartenra]

The docs need to be updated. @vue/composition-api is a package for Vue 2.

[Manubi]

The whole docs are a mess. You even don’t really know on what version you are…
If you want to update something you get a 404.

[heresie]

Sorry for cross-posting, but I have also this issue

To Reproduce
Steps to reproduce the behavior:

# Create a temporary folder & go in it
mkdir -p /tmp/tests && cd $_

# Run an Node 15.11 Docker container
docker run -it -w /spa -v $PWD:/spa --rm --name vueapollo --entrypoint sh -p 0.0.0.0:8080:8080/tcp node:15.11-alpine3.11

~~ INSIDE DOCKER CONTAINER FROM HERE ~~

# Install vue/cli & create vue3 project
npm install -g @vue/cli
vue create vueapollo

Vue CLI v4.5.11
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM

🎉  Successfully created project vueapollo.
👉  Get started with the following commands:

# Go in project folder & install dependency
cd vueapollo
npm install @vue/apollo-composable --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@">= 2.5 < 3" from @vue/[email protected]
npm ERR! node_modules/@vue/composition-api
npm ERR!   peer @vue/composition-api@"^1.0.0-beta.16" from @vue/[email protected]
npm ERR!   node_modules/@vue/apollo-composable
npm ERR!     @vue/apollo-composable@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-03-10T14_18_35_598Z-debug.log

I doubt that the --force option is what I should do...

[engeman2008]

how is this issue resolved? I have the same issue

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.ts 6:0-55 15:12-25
@ multi (webpack)-dev-server/client?http://192.168.1.9:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

main.ts
import { createApp, provide, h } from 'vue';
import { ApolloClients } from '@vue/apollo-composable';
import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as apolloClient from './apollo-client';

const app = createApp({
setup() {
provide(ApolloClients, {
default: apolloClient,
});
},
render: () => h(App),
});

app.use(store).use(router).mount('#app');

[HansCronau]

@engeman2008 You seem to be describing another issue. Are you perhaps using @vue/apollo-composable version 4.0.0-alpha.13, which was released two days before your comment? If so, I think your issue is already being discussed: #1217.

[engeman2008]

@engeman2008 You seem to be describing another issue. Are you perhaps using @vue/apollo-composable version 4.0.0-alpha.13, which was released two days before your comment? If so, I think your issue is already being discussed: #1217.

Yes, Thank you. This solved my issue