Setup

Install

Install with yarn:

yarn add nuxt-graphql-request graphql --dev

Install with npm:

npm install nuxt-graphql-request graphql --save-dev

nuxt.config.js

module.exports = {
  buildModules: ['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: {},

    /**
     * Optional
     * default: true (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.js

module.exports = {
  publicRuntimeConfig: {
    graphql: {
      clients: {
        default: {
          endpoint: '<client endpoint>',
        },
        secondClient: {
          endpoint: '<client endpoint>',
        },
        // ...more clients
      },
    },
  },
};

TypeScript

nuxt-shopify offers type definitions. Just add an entry in tsconfig.json.

tsconfig.json{
  "compilerOptions": {
    "types": ["@nuxt/types", "nuxt-graphql-request"]
  }
}

tsconfig.json{
  "compilerOptions": {
    "types": ["@nuxt/vue-app", "nuxt-graphql-request"]
  }
}