nitrogql

Getting Started

This page guides you through the steps to get started with nitrogql.

Installation

The nitrogql CLI can be installed with npm. The CLI is required for any workflow using nitrogql. Since generated types depend on TypedDocumentNode, you also need to install it to your project.

npm install --save-dev @nitrogql/cli @graphql-typed-document-node/core

Depending on framework or tool you use, you may also need to install appropriate loader packages.

For webpack-based tools:

npm install --save-dev @nitrogql/graphql-loader

For Rollup-based tools:

npm install --save-dev @nitrogql/rollup-plugin

Configuration File

nitrogql uses a configuration file to specify the location of your schema and operations. The configuration file is named graphql.config.yaml. The configuration file should be placed in the root of your project.

The simplest configuration file will look like:

schema: ./schema/*.graphql
documents: ./app/**/*.graphql

This file follows the GraphQL Config convention from The Guild. You might already have a configuration file if you use other GraphQL tools.

See Configuration for full details about the configuration file. You can also use JSON (graphql.config.json) or JavaScript (graphql.config.js) instead of YAML.

Setting up GraphQL loader for webpack

If you are using webpack-based tools, you need to configure the loader.

Example setup (webpack.config.js):

module: {
  rules: [
    // ...
    {
      test: /\.graphql$/,
      loader: "@nitrogql/graphql-loader",
      options: {
        configFile: "./graphql.config.yaml",
      }
    }
  ]
}

🔥 We have a Next.js example: see on GitHub

Setting up GraphQL loader for Rollup

If you are using Rollup-based tools, you need to configure the plugin.

Example setup (rollup.config.js):

import nitrogql from "@nitrogql/rollup-plugin";

export default {
  plugins: [
    nitrogql({
      include: ["**/*.graphql"],
    }),
  ],
};

🔥 We have a Vite example: see on GitHub

🧺 Read Next: Using GraphQL in TypeScript projects