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