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

[adharshmk96]

Environment

---

• Operating System: Darwin
• Node Version: v21.7.2
• Nuxt Version: 3.14.159
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxtjs/[email protected], @pinia/[email protected], @nuxt/[email protected]
• Build Modules: -

---

Describe the bug

I'm getting 500 error when accessing a route that's using useQuery

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

at resolveClient (http://localhost:3001/_nuxt/node_modules/@vue/apollo-composable/dist/index.mjs?v=493fcafe:58:13)
at getClient (http://localhost:3001/_nuxt/node_modules/@vue/apollo-composable/dist/index.mjs?v=493fcafe:296:12)
at start (http://localhost:3001/_nuxt/node_modules/@vue/apollo-composable/dist/index.mjs?v=493fcafe:317:20)
at useQueryImpl (http://localhost:3001/_nuxt/node_modules/@vue/apollo-composable/dist/index.mjs?v=493fcafe:589:5)
at useQuery (http://localhost:3001/_nuxt/node_modules/@vue/apollo-composable/dist/index.mjs?v=493fcafe:236:10)
at setup (http://localhost:3001/_nuxt/pages/member/overview.js:68:45)
at callWithErrorHandling (http://localhost:3001/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=493fcafe:197:19)
at setupStatefulComponent (http://localhost:3001/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=493fcafe:7923:25)
at setupComponent (http://localhost:3001/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=493fcafe:7884:36)
at mountComponent (http://localhost:3001/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=493fcafe:5240:7)

the code I'm using is

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 { result, loading, error, refetch } = useQuery(query);

in nuxt config I've configured it like this

modules: [
    "@nuxtjs/apollo",
    "@pinia/nuxt",
    "@nuxt/ui",
  ],
  apollo: {
    clients: {
      default: {
        httpEndpoint: 'http://localhost:8080/query',
        httpLinkOptions: {
          credentials: 'include',
        }
      }
    },
  }

Expected behaviour

I'm expecting the page to load properly without errors.

Reproduction

No response

Additional context

No response

Logs

[adharshmk96]

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);

[grelle]

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

[JoseF7830]

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>
``