nuxt-modules
useMutation with script setup in Nuxt 3
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
Additional context
No response
Logs
No response
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.
@scottcarlton I also faced this issue and resolved it with the two hacks mentioned. Unfortunate but for now I am sticking with the stack.
