apollo: Failed to resolve import "@vue/apollo-composable"

@ifusiontt The manually imported useQuery uses a different instance than the one defined in the module (the one being exposed in #imports). Therefore you would need to provide the apollo client yourself.

For example (plugins/apollo.ts):

import {provideApolloClient} from '@vue/apollo-composable'

export default defineNuxtPlugin(() => {
  provideApolloClient(useApollo().clients.default)
})

You can also use provideApolloClients if you need to use multiple clients.

This issue is still present using node v18.13.0 and npm v9.4.0 I am with “@nuxtjs/apollo”: “^5.0.0-alpha.5” and “nuxt”: “^3.1.1”

useQuery has the issue and still it’s not solved. useAsyncQuery works fine.

When I force add @vue/apollo-composable to my project it work… (npm i --force @vue/apollo-composable)

Indeed when I force installed @vue/apollo-composables, I now have access to useQuery.

Having the same problem but only when i make use of useMutation - Node 16/NPM 7 on Nuxt rc12

I’m having this issue as well with "@nuxtjs/apollo": "^5.0.0-alpha.6" and "nuxt": "^3.2.2". Actually useMutation seem completely broken. When using useMutation within <script setup> it causes nuxt to break with Failed to resolve import "@vue/apollo-composable" from "pages/applicants/[id]/[interviewId]/edit.vue". Does the file exist? error. If I install @vue/apollo-composable this fixes the issue, which sort of seems like a hack since is should work like useQuery and useAsyncQuery. As well the const { mutate } = useMutation(MY_MUTATION) and calling mutate(varabiles) cause an error Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.. See issue 535. Any thoughts on this? Pretty frustrating at this point.

https://stackblitz.com/edit/nuxt-starter-fvrzqo

This project was created with nodejs v18.12.1 and npm v8.19.2. So you will find differences inside the package-lock.json files.

I guess it has something to do with the current npm version. I am using nvm and had node v16.14.2 installed. But nvm also installs npm v8.5.0 wich also seems to cause these problems.

After downgrading to node v15.14.0 (wich uses npm v7.7.6) I can run the project. When you delete my package-lock.json and reinstall the project on StackBlitz (wich uses node v16.14.2 and npm v7.17.0) the project runs fine.

@Der-Alex i’m going to quit my computer. Can you share your project to @Diizzayy ?

I’d definitely contribute and open a PR if I had the time, but unfortunately, that’s not feasible right now. Opting to move away and install stable packages independently seems like the best choice to avoid potential headaches in the future.

With following versions - useMutation not working. few days back useAsyncQuery worked fine for mutations as well. As of now its not sending graphql call to server and we dont see any call in network tab. It became blocker for me. node - 18.18.0, npm 9.8.1 “nuxt”: “^3.6.2”,
“@vue/apollo-composable”: “^4.0.0-beta.8”,
“@nuxtjs/apollo”: “^5.0.0-alpha.6”,

I’m having the same issue as described above, getting an error that @vue/apollo-composableis missing. Deleting node-modulesand lock.json, and running npm install again didn’t fix it.

ERROR Failed to resolve import "@vue/apollo-composable" from "components/x.vue". Does the file exist? (x2)

But manually installing via npm i -D @vue/apollo-composable@latest --legacy-peer-deps doesn’t fix my problem either, since Apollo stops working with an error:

Unexpected string literal "development". Expected ')' to end a compound expression. in file graphql-tag.js:

// node_modules/graphql/jsutils/instanceOf.mjs
var _globalThis$process;
var instanceOf = (
  /* c8 ignore next 6 */
  // FIXME: https://github.com/graphql/graphql-js/issues/2317
  ((_globalThis$process = globalThis.process) === null || _globalThis$process === void 0 ? void 0 : _globalThis$"development") === "production" ? function instanceOf2(value, constructor) {
    return value in

Please note that everything was working fine, until I touched the package.json to upgrade a seemingly unrelated package, TailwindCSS.

Any other ideas, or suggestion for a real fix?

@keithmifsud this is really weird, because I am running on nde v 18 and honestly useQuery still doesn’t work. Can you share your package.json and your nuxt.config.ts?

I had to stop using this module as it doesn’t save use cached data 😞

@iamandrewluca It is a dependency that is needed by the @vue/apollo-composable to work properly. I expect that every dependency that a third party package needs, gets installed directly, so that I can use that package without any issues. And thats the problem here.

Otherwise it should be mentioned in the documentation, that other packages have to be installed to make @vue/apollo-composable work properly.

Also I think npm i -D @vue/apollo-composable@latest --legacy-peer-deps should be used instead of --force

Today I was fiddling around a bit with the nuxt-modules/apollo code. I cloned it on my local machine and tried to install it with npm install which didn’t work. After checking the sources I found that the package seems to get built with pnpm instead of npm. So I installed it with pnpm install and got this:

woot@woot-pc:~/dev/int/nuxt/apollo$ pnpm install
Scope: all 2 workspace projects
Lockfile is up to date, resolution step is skipped
Already up to date
. prepare$ nuxt-module-build --stub && nuxi prepare playground
│ ℹ Stubbing @nuxtjs/apollo
│ Nuxi 3.0.0
│ ✔ Types generated in playground/.nuxt
└─ Done in 2s
Done in 2.7s

I could install it and I could even run the playground and could mutate the todo demo!

So I thought maybe this works with a fresh nuxt install as well.

woot@woot-pc:~/dev/int/nuxt/nptest$ pnpm install --shamefully-hoist
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +631
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/woot/.local/share/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 670, reused 415, downloaded 212, added 631, done
node_modules/.pnpm/esbuild@0.16.17/node_modules/esbuild: Running postinstall script, done in 46ms
node_modules/.pnpm/esbuild@0.17.12/node_modules/esbuild: Running postinstall script, done in 64ms

> @ postinstall /home/woot/dev/int/nuxt/nptest
> nuxt prepare

Nuxi 3.3.1                                                                                                                                                                                               18:39:48
✔ Types generated in .nuxt                                                                                                                                                                               18:39:49

devDependencies:
+ nuxt 3.3.1

The integrity of 3179 files was checked. This might have caused installation to take longer.
Done in 12.2s

woot@woot-pc:~/dev/int/nuxt/nptest$ pnpm install @nuxtjs/apollo@next
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +30
++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/typescript/4.9.5: 11.6 MB/11.6 MB, done
Progress: resolved 700, reused 646, downloaded 11, added 30, done

dependencies:
+ @nuxtjs/apollo 5.0.0-alpha.5

 WARN  Issues with peer dependencies found
.
├─┬ @nuxtjs/apollo 5.0.0-alpha.5
│ └─┬ @vue/apollo-composable 4.0.0-beta.1
│   ├── ✕ missing peer vue@"^2.6.0 || ^3.1.0"
│   ├─┬ ts-essentials 9.3.1
│   │ └── ✕ missing peer typescript@>=4.1.0
│   └─┬ vue-demi 0.13.11
│     └── ✕ missing peer vue@"^3.0.0-0 || ^2.6.0"
└─┬ nuxt 3.3.1
  └─┬ @nuxt/vite-builder 3.3.1
    └─┬ vite-plugin-checker 0.5.6
      └── ✕ missing peer typescript@"*"
Peer dependencies that should be installed:
  typescript@>=4.1.0                                          vue@">=3.0.0-0 <3.0.0 || >=3.1.0 <4.0.0 || >=2.6.0 <3.0.0"  

Done in 6.6s

The installation still complains about missing peers. That also should be fixed! I guess this has something to do with apollo-composable trying to keep giving support for vue 2 and the vue composition api.

BUT! After that installation with pnpm useQuery works fine! So we definitely have different results when using npm and pnpm

@Diizzayy I hope this helps you finding the real issue here.

same here, nothing has fixed this.

Also having the same problem using useMutation and useQuery. useAsyncQuery works fine.

1. Apollo - 5.0.0-alpha.5
2. Nuxt - 3.0.0
3. Node - v16.13.0
4. NPM - 8.1.0

If I import the composable manually like below, the error “Failed to resolve import “@vue/apollo-composable”” goes away import { useQuery } from ‘@nuxtjs/apollo/node_modules/@vue/apollo-composable’;

However it presents another error; Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

@Diizzayy Not sure what’s happening… When I download the project from StackBlitz and install and run it, everything works. When I create a new project with npx nuxi init projectname, npm i, npm i -D @nuxtjs/apollo@next, npm run dev with the same nuxt.config.ts and index.vue, I get the error…

I’m going to dig deeper…

When I force add @vue/apollo-composable to my project it work… (npm i --force @vue/apollo-composable)

I was digging a bit deeper and can say that this happens when using useQuery. useAsyncQuery works fine.