Failed to resolve import "@vue/apollo-composable

BorisKamp commented 1 year ago

Environment

Operating System: Darwin
Node Version: v20.4.0
Nuxt Version: 3.7.4
CLI Version: 3.9.0
Nitro Version: 2.6.3
Package Manager: npm@9.7.2
Builder: -
User Config: runtimeConfig, devtools, nitro, build, css, modules, components, googleFonts, pwa, i18n, apollo, image
Runtime Modules: @nuxtjs/google-fonts@3.0.2, @kevinmarrec/nuxt-pwa@0.17.0, @nuxtjs/i18n@8.0.0-rc.5, @nuxtjs/apollo@5.0.0-alpha.7, @nuxt/image-edge@1.0.0-rc.3-28294196.0bd6b68, @nuxtjs/tailwindcss@6.8.0, @pinia/nuxt@0.4.11
Build Modules: -

Describe the bug

I literally have no clue why this jumped in my screen at once. It was working before. I am calling a mutation as follows:

const { mutate: submitForMutation, loading, error } = useMutation<ResponseLogin>(loginMutation)

async function submitForm() {
  const isFormCorrect = await v$.value.$validate()

  if (isFormCorrect) {
    await submitForMutation({
      input: {
        identifier: loginData.value.email,
        password: loginData.value.password,
        provider: 'local',
      },
    })
      .then((response) => {
        onLogin(response?.data?.login.jwt)
        useAuthStore().setUser(response?.data?.login.user)
        useAuthStore().setBearer(response?.data?.login.jwt)
      })
  }
}

In my <script lang="ts" setup>.

It gives me the following error in my console:

Internal server error: Failed to resolve import "@vue/apollo-composable" from "components/forms/FormLogin.vue". Does the file exist?                                                                     8:51:08 PM
  Plugin: vite:import-analysis
  File: /Users/boriskamp/Documents/bk-development/todays-portal-nuxt/components/forms/FormLogin.vue:7:30
  5  |  import { useI18nValidators } from '/Users/boriskamp/Documents/bk-development/todays-portal-nuxt/composables/i18n-validators.ts';
  6  |  import { ref, computed } from 'vue';
  7  |  import { useMutation } from '@vue/apollo-composable';
     |                               ^
  8  |  /* Injection by vite-plugin-vue-inspector Start */
  9  |  import { createVNode as __createVNode,createElementVNode as __createElementVNode,createElementBlock as __createElementBlock } from 'vue'
      at formatError (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46)
      at TransformContext.error (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19)
      at normalizeUrl (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41844:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41998:47
      at async Promise.all (index 6)
      at async TransformContext.transform (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41914:13)
      at async file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite-plugin-inspect/dist/index.mjs:922:19
      at async Object.transform (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30)
      at async loadAndTransform (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29) (x3)

Expected behaviour

To just work like it did before....

Reproduction

No response

Additional context

No response

Logs

No response

pat-flew commented 1 year ago

Same issue here, as soon as I make reference to the useMutation, useSubscription, or useQuery composables.

useAsyncQuery and useLazyAsyncQuery composables do not do this.

Since it seems to be an issue with the auto import, any reference is enough to make it bail like this for me.

<script setup lang="ts">
useMutation;
</script>
<template></template>

ERROR  Internal server error: Failed to resolve import "@vue/apollo-composable" from "pages/centres/[id]/edit.vue". Does the file exist?
  Plugin: vite:import-analysis
  10 |  import { gql } from 'graphql-tag';
  11 |  import { useAsyncQuery } from '/Volumes/(snip)/nuxt-test/node_modules/@nuxtjs/apollo/dist/runtime/composables';
  12 |  import { useMutation } from '@vue/apollo-composable';
     |                               ^
  13 |  /* Injection by vite-plugin-vue-inspector Start */
  14 |  import { createVNode as __createVNode,createElementVNode as __createElementVNode,createElementBlock as __createElementBlock } from 'vue'

  12   │   "devDependencies": {
  13   │     "@nuxt/devtools": "^1.0.0-beta.2",
  14   │     "@nuxtjs/apollo": "^5.0.0-alpha.7",
  15   │     "nuxt": "^3.7.4",
  16   │     "vue": "^3.3.4",
  17   │     "vue-router": "^4.2.5"
  18   │   },

pat-flew commented 1 year ago

I could get past this by installing "@vue/apollo-composable" manually, but hitting other issues also mentioned in #550.

BorisKamp commented 1 year ago

I got rid of this package and moved to https://github.com/Diizzayy/nuxt-graphql-client

And I must say it was very easy to setup and use, wish I found this earlier.

PierreCavalet commented 1 year ago

@pat-flew did you find a solution for this ?

pat-flew commented 1 year ago

Hopefully; the later suggestion in https://github.com/nuxt-modules/apollo/issues/550#issuecomment-1775884358 has been working for me so far @PierreCavalet

Jan-Heussner commented 11 months ago

@BorisKamp: I tried the same and then i was realizing that the nuxt-graphql-client(https://github.com/jasonkuhrt/graphql-request#why-was-the-file-upload-feature-taken-away-will-it-return) removed the support of file uploads :( And now i am stucked :D How did u solve this? Or do u have no need of file uploads?

nuxt-modules / apollo