Closed scottcarlton closed 8 months ago
Darwin
v16.19.1
3.2.2
2.2.3
yarn@1.22.11
vite
ssr
modules
alias
security
apollo
css
devServer
nuxt-security@^0.13.0
@nuxtjs/apollo@^5.0.0-alpha.6
-
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>
Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.
<script setup> import MY_MUTATION from "./graphql/updateAnswers.mutation.gql" .... const { mutate: updateAnswers } = useMutation(MY_MUTATION) const submitEffect = async () => { .... mutate(variables) .... } .... </script>
Would expect it to work the same as setup() {}. NOTE: 8/3 setup() didn't work either.
This is just a pretty basic setup with package.json and nuxt.config as followed
package.json
nuxt.config
{ "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.
Environment
Darwin
v16.19.1
3.2.2
2.2.3
yarn@1.22.11
vite
ssr
,modules
,alias
,security
,apollo
,css
,vite
,devServer
nuxt-security@^0.13.0
,@nuxtjs/apollo@^5.0.0-alpha.6
Build Modules:
-
Describe the bug
Using useMutation within
<script setup>
causesError: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.
with nuxt 3. Example: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
andnuxt.config
as followedThen just use component with Githubissues.