Multiple Clients

Seamlessly interact with multiple GraphQL APIs.

Default Client

If a single client is configured, it will be used by default.

In Multiple Client Mode, the default client is inferred by either:

• The first configured client.
• Explicitly setting the client name to default in the Nuxt Configuration.

Multiple Client Mode

When you have configured more than one client, The behavior of the module slightly changes and the pertinent client must be specified when using nuxt-graphql-clientComposables and when composing GraphQL Operations for the clients that aren't flagged as default.

Configure multiple clients

Multiple clients can be configured by adding the clients key to the graphql-client property in public runtimeConfig.

The client names are inferred from the keys provided in the clients object.

Available client options

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-graphql-client'],

  runtimeConfig: {
    public: {
      'graphql-client': {
        clients: {
          default: 'https://api.spacex.land/graphql', // process.env.GQL_HOST
          github: {
            host: 'https://api.github.com/graphql', // process.env.GQL_GITHUB_HOST
            token: 'your_access_token', // process.env.GQL_GITHUB_TOKEN & process.env.GQL_GITHUB_TOKEN_NAME
          },
          countries: {
            host: 'https://countries.trevorblades.com/graphql', // process.env.GQL_COUNTRIES_HOST
            token: {
              name: 'X-Custom-Auth', // process.env.GQL_COUNTRIES_TOKEN_NAME
              value: 'your_access_token' // process.env.GQL_COUNTRIES_TOKEN
            }
          }
        }
      }
    }
  }
})

Writing GraphQL Operations

When using multiple clients, you must specify the client that your GraphQL document is associated with.

There are two methods of associating a client:

1. Save the GraphQL Document ending with <clientname>.gql|graphql.

query viewer {
    viewer {
        login
    }
}

Doing so will automatically link the query above to the client named github. This query will be executable in your app by simply calling GqlViewer()

2. Place the GraphQL Documents in a folder of the same name as the client.

ie: Given ./nuxt_app/queries/spacex/launches.gql

All GraphQL operations within launches.gql will automatically be linked to the client matching the name of the GraphQL document's parent directory ie: spacex.

3. Lastly, GraphQL documents which don't match any of the aforementioned conventions will be linked to the default client.