Setup

Install

npx nuxi@latest module add graphql-request

For Nuxt2, use nuxt-graphql-request v6:

yarn add nuxt-graphql-request@v6 graphql --dev

nuxt.config.ts

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

  graphql: {
    /**
     * An Object of your GraphQL clients
     */
    clients: {
      default: {
        /**
         * The client endpoint url
         */
        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
        /**
         * Per-client options overrides
         * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
         */
        options: {},
      },
      secondClient: {
        // ...client config
      },
      // ...your other clients
    },

    /**
     * Options
     * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
     */
    options: {
      method: 'get', // Default to `POST`
    },

    /**
     * Optional
     * default: false (this includes cross-fetch/polyfill before creating the graphql client)
     */
    useFetchPolyfill: true,

    /**
     * Optional
     * default: false (this includes graphql-tag for node_modules folder)
     */
    includeNodeModules: true,
  },
});

Runtime Config

If you need to supply your endpoint at runtime, rather than build time, you can use the Runtime Config to provide this value:

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      graphql: {
        clients: {
          default: {
            endpoint: '<client endpoint>',
          },
          secondClient: {
            endpoint: '<client endpoint>',
          },
          // ...more clients
        },
      },
    },
  },
});

TypeScript

Type definitions should work out-of-the-box. You should already have Typescript set up to extend Nuxt's auto-generated config. If not, you can start here:

tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json"
}