Skip to content

Missing client in apolloProvider when using custom client in smart query #658

@stummjr

Description

@stummjr

Environment

  • Operating System: Darwin
  • Node Version: v22.18.0
  • Nuxt Version: 3.17.7
  • CLI Version: 3.26.2
  • Nitro Version: 2.12.2
  • Package Manager: yarn@1.22.22
  • Builder: -
  • User Config: compatibilityDate, devtools, modules, pages, components, ssr, css, vue, apollo, vuetify, app, hooks, runtimeConfig
  • Runtime Modules: @nuxt/eslint@1.5.2, @nuxt/image@1.10.0, @pinia/nuxt@0.11.1, @nuxtjs/apollo@5.0.0-alpha.14, @sentry/nuxt/module@9.42.0, vuetify-nuxt-module@0.18.7
  • Build Modules: -

Describe the bug

My project defines two Apollo clients in nuxt.config.ts: default and noauth.

apollo: {
  autoImports: true,
  clients: {
    default: {
      httpEndpoint: process.env.BASE_URL + '/graphql',
      browserHttpEndpoint: process.env.BASE_URL + '/graphql',
      ...
    },
    noauth: {
      httpEndpoint: process.env.BASE_URL + '/public/graphql',
      browserHttpEndpoint: process.env.BASE_URL + '/public/graphql',
      ...
    }
  }
}

When I try using a non-default client in a Smart Query, like this:

  apollo: {
    plans: {
      query: plans,
      client: 'noauth',
    }
  }

I get this error:

[vue-apollo] Missing client 'noauth' in 'apolloProvider'

at DollarApollo.getClient (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:1130:21)
at DollarApollo.watchQuery (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:1152:29)
at SmartQuery.executeApollo (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:742:39)
at SmartQuery.start (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:529:14)
at SmartQuery.autostart (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:424:14)
at DollarApollo.addSmartQuery (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:1223:15)
at Proxy.launch (http://localhost:3000/_nuxt/node_modules/@vue/apollo-option/dist/vue-apollo-option.esm.mjs?v=52ce178c:1361:34)
at callWithErrorHandling (http://localhost:3000/_nuxt/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=52ce178c:197:33)
at callWithAsyncErrorHandling (http://localhost:3000/_nuxt/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=52ce178c:204:17)
at callHook (http://localhost:3000/_nuxt/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=52ce178c:3670:3)

Looking at this project's source code, it looks like only the default client is added to the Apollo provider here. Is that right?

How can I tell a smart query how to use a non-default client?

Expected behaviour

The query runs using the noauth client, reaching the /public/graphql URL.

Reproduction

No response

Additional context

Similar issues have been reported before: #628

Looks like this line should become something like this:

nuxtApp.vueApp.use(createApolloProvider({ clients, defaultClient: clients?.default }))

That's documented here: https://apollo.vuejs.org/guide-option/multiple-clients#multiple-clients

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions