nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
956 stars 198 forks source link

useMutation with script setup in Nuxt 3 #535

Closed scottcarlton closed 8 months ago

scottcarlton commented 1 year ago

Environment


Describe the bug

Using useMutation within <script setup> causes Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup. with nuxt 3. Example:

<script setup>
import MY_MUTATION from "./graphql/updateAnswers.mutation.gql"
....
const { mutate: updateAnswers } = useMutation(MY_MUTATION)
const submitEffect = async () => {
    ....
    mutate(variables)
    ....
}
....
</script>

Expected behaviour

Would expect it to work the same as setup() {}. NOTE: 8/3 setup() didn't work either.

Reproduction

This is just a pretty basic setup with package.json and nuxt.config as followed

{
  "name": "admin",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/apollo": "^5.0.0-alpha.6",
    "nuxt": "^3.2.2",
    "nuxt-security": "^0.13.0"
  },
  "dependencies": {
    "@nuxt/vite-builder": "^3.2.2",
    "@types/firebase": "^3.2.1",
    "@vue/apollo-composable": "^4.0.0-beta.8", // need otherwise useMuation throws error that module is not found
    "@vueuse/core": "^9.13.0",
    "@vueuse/firebase": "^9.13.0",
    "firebase": "^9.17.2"
  }
}
export default defineNuxtConfig({
  ssr: false,
  modules: ["nuxt-security", "@nuxtjs/apollo"],
  alias: {
    "@common": resolve(__dirname, "../common/src"),
    "@api": resolve(__dirname, "../api/src"),
  },
  apollo: {
    clients: {
      default: {
        httpEndpoint: process.env.VITE_API_URL || "http://localhost:8080/graphql",
      },
    },
    autoImports: true,
    authType: "bearer",
    authHeader: "authorization",
    tokenStorage: "cookie",
  },
  css: [
    "@/assets/styles/main.scss", // contains all global styles
  ],
  vite: {
    envDir: "../..",
  },
  devServer: {
    port: 3030,
  },
});

Then just use component with Githubissues.

  • Githubissues is a development platform for aggregating issues.