useMutation with script setup in Nuxt 3

[scottcarlton]

Environment

---

• Operating System: Darwin
• Node Version: v16.19.1
• Nuxt Version: 3.2.2
• Nitro Version: 2.2.3
• Package Manager: [email protected]
• Builder: vite
• User Config: ssr, modules, alias, security, apollo, css, vite, devServer
• Runtime Modules: nuxt-security@^0.13.0, @nuxtjs/apollo@^5.0.0-alpha.6
• Build Modules: -

---

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 <script setup> with mutate within another method.

Additional context

No response

Logs

No response

[scottcarlton]

Have been able to find a work around using this issue #444, but this seems like a hack. Would expect not to have to explicitly add apollo-composable and and this plugin file.

[alexthegoodman]

@scottcarlton I also faced this issue and resolved it with the two hacks mentioned. Unfortunate but for now I am sticking with the stack.