rollup-plugin-typed-gql

Simple, unobtrusive and fully type safe GraphQL plugin.

import { request } from "graphql-request";
import { AllStarships } from "./query.gql";

const endpoint = "https://swapi-graphql.eskerda.vercel.app";
const result = await request(endpoint, AllStarships);
//      ^ { allStarships: { starships: { name: string }[] } }

# query.graphql
query AllStarships {
  allStarships {
    starships {
      name
    }
  }
}

Usage

Install using your favorite package manager:

npm i -D rollup-plugin-typed-gql @graphql-typed-document-node/core

Add plugin to your rollup or vite plugin:

import typedGql from "rollup-plugin-typed-gql";

export default defineConfig({
  plugins: [typedGql()],
});

Enable allowArbitraryExtensions and add ".gql/types" to rootDirs in your tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "rootDirs": [".", ".gql/types"],
    "allowArbitraryExtensions": true
    // rest of your configuration
  }
}

If you use a framework or other tools that also take advantage of typescripts rootDirs (like SvelteKit), you need to make sure you add their virtual folders manually. For SvelteKit this will look like: "rootDirs": [".", ".svelte-kit/types", ".gql/types"].

Recommendations

To get most out of your GraphQL setup, we recommend installing the GraphQL language server VS Code plugin (or a similar language server integration if you're not rocking vscode).

A current limitation is that you have to have your GraphQL schema locally. If you don't have that, it can easily be extracted by running:

npx get-graphql-schema https://your-schema-url > schema.graphql

Configuration

All configuration options are optional. This configuration is equivalent to the defaults you get if you don't provide any options:

typedGql({
  /**
   * Path to your GraphQL schema.
   */
  schema: "schema.graphql",
  /**
   * Custom scalars.
   */
  scalars: {},
  /**
   * Path to directory to search for GraphQL files.
   */
  searchDir: "src",
  /**
   * Extension used for your GraphQL files.
   */
  extensions: [".gql", ".graphql"],
  /**
   * Base directory to search for files.
   */
  baseDir: process.cwd(),
  /**
   * Time to complete initial generation
   */
  startupTimeout: 2000,
});