Error: Apollo client with id default not found. Use an app.runWithContext() or provideApolloClient() if you are outside of a component setup. #638

Activity

1. adharshmk96

   added

   bug

   on Nov 19, 2024
2. adharshmk96 commented on Nov 19, 2024

   

   adharshmk96

   on Nov 19, 2024

   Author

   More actions

   useAsyncQuery works well

   const query = gql`
     query {
       activeTrainingProgram {
         id
         name
         trainingWeek {
           day
           exercises {
             exerciseName
             weight
             sets
             reps
           }
         }
       }
     }
   `;
   
   const sampleData = {
     id: 1,
     name: "Sample Training Program",
     trainingWeek: {
       day: "Monday",
       exercises: [
         {
           exerciseName: "Sample Exercise",
           weight: 50,
           sets: 3,
           reps: 10,
         },
       ],
     },
   };
   
   const { data } = await useAsyncQuery(query);
   
3. grelle commented on Jan 14, 2025

   

   grelle

   on Jan 14, 2025

   More actions

   I'm experiencing the same issue, I'm a bit amazed, isn't this a big thing ? I mean, doesn't people use this setup a lot ? How can one work around this, tried to apply the fix mentioned above but i was unable to install the module locally. My understanding is that useAsyncData uses cached data after SSR initial load so it is not an option ?

   Here is a small reproduction of the issue: https://stackblitz.com/edit/nuxt-starter-jj8mw76x?file=pages%2Findex.vue
4. JoseF7830 commented on Jan 26, 2025

   

   JoseF7830

   on Jan 26, 2025

   More actions

   I'm getting the same issue with useMutation

   NuxtJs: 3.15.2
   @nuxtjs/apollo: 5.0.0-alpha.14

   My Nuxt Page:

   <template>
     <h1>Edit Category:</h1>
     <div>
       <input
         type="text"
         v-model="category"
         class="w-full p-2 mb-4 border border-gray-300 rounded-lg"
         placeholder="Category name"
       />
       <button
         @click="handleUpdateCategory"
         class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
       >
         Save
       </button>
     </div>
   </template>
   
   <script setup lang="ts">
   const route = useRoute();
   const categoryId = ref(route.params.categoryId);
   const category = ref('');
   
   const query = gql`
     query getCategory($id: Int!) {
       categoria(id: $id) {
         id
         nombre
       }
     }
   `;
   
   // useAsyncQuery is working fine!
   const { data } = await useAsyncQuery(query, {
     id: parseInt(categoryId.value),
   });
   
   if (data.value.categoria) {
     category.value = data.value.categoria.nombre;
   }
   
   const updateCategoryQuery = gql`
     mutation updateCategory($inputCategoria: CategoriaInputTypeInput!, $id: Int!) {
       updateCategoria(inputCategoria: $inputCategoria, id: $id) {
         id
         nombre
       }
     }
   `;
   
   // Excecute the mutation, getting the Apllo client error!
   const { mutate: updateCategory } = useMutation(updateCategoryQuery);
   
   const handleUpdateCategory = async () => {
     try {
       await updateCategory({
         id: parseInt(categoryId.value),
         inputCategoria: { nombre: category.value },
       });
       
     } catch (error) {
       console.error(error);
     }
   };
   </script>
   ``
   
6. s001dxp commented on Mar 10, 2025

   

   s001dxp

   on Mar 10, 2025

   More actions

   I don't think this project is being actively developed anymore
7. zwoelf commented on Mar 20, 2025

   

   zwoelf

   on Mar 20, 2025

   More actions

   Same
8. segressio commented on Jun 21, 2025

   

   segressio

   on Jun 21, 2025

   More actions

   How can I fix this? only useSubscription doesn't work, but query and mutation do.
9. colmer commented on Jun 25, 2025

   

   colmer

   on Jun 25, 2025

   More actions

   Works for me

   ~/plugins/vue-apollo.ts

   import { DefaultApolloClient } from '@vue/apollo-composable'
   import type { ApolloClient } from '@apollo/client/core'
   import { defineNuxtPlugin } from '#app'
   
   export default defineNuxtPlugin((nuxtApp) => {
     const defaultClient = (nuxtApp.$apollo as any).defaultClient as ApolloClient<unknown>
     nuxtApp.vueApp.provide(DefaultApolloClient, defaultClient)
   })
   

   ~/pages/index.vue

   import { useMutation } from '@vue/apollo-composable'
   // ...
   const { mutate } = useMutation(someMutation)
   

   👍React with 👍1Reacted by Liya Abdrashitova
10. javi-code commented on Jul 1, 2025

    

    javi-code

    on Jul 1, 2025

    More actions

    Someone found a solution ?

    👀React with 👀1Reacted by sanmu
11. wuyuedefeng commented on Sep 3, 2025

    

    wuyuedefeng

    on Sep 3, 2025

    Last edited by wuyuedefeng

    More actions

    useSubscription not work, when can resolve?
12. adamwgriffin commented on Sep 10, 2025

    

    adamwgriffin

    on Sep 10, 2025

    More actions

    I was able to solve this issue simply by installing @vue/apollo-composable as a separate dependency in my Nuxt 4.1.1 project with npm install @vue/apollo-composable. I read through past issues in this repo and noticed that @vue/apollo-composable has come up as an issue multiple different times, for example: #639 and #550 (comment). The version of @vue/apollo-composable that I installed appears to be the same version that is provided by @nuxtjs/apollo (4.2.2), so I'm not entirely sure why this helps, but I've tested multiple times now, and it seems to be a good workaround.

    I also tried @colmer's solution by adding a plugin for Apollo and that worked well too, but I no longer needed it after installing @vue/apollo-composable.

    Hope this helps as a workaround for anyone else that was struggling with this like I was.

    👍React with 👍5Reacted by Johannes Schweig, Suneet Jain, Anton Sitnikov, mhinton-dmi and Liya Abdrashitova
13. adamwgriffin

    added a commit that references this issue on Sep 11, 2025

    Workaround for nuxt/apollo

    ...

    f44cea1