gatsby-plugin-typegen

Watch your queries and automatically generates TypeScript/Flow definitions.

Schema extraction
Generates type definitions using graphql-codegen
Auto-fixing <StaticQuery> and useStaticQuery() in code with generated type name.
Integrate Gatsby project with GraphQL & TypeScript ecosystem.

Demo

Install

yarn add gatsby-plugin-typegen

# or
# npm install --save gatsby-plugin-typegen

How to use

// In your gatsby-config.js
plugins: [`gatsby-plugin-typegen`]

Example of type-safe usage

import { PluginOptions as TypegenPluginOptions } from 'gatsby-plugin-typegen/types';

type Plugin = (
  | string
  | { resolve: string, options: any }
  | { resolve: `gatsby-plugin-typegen` options: TypegenPluginOptions }
);

const plugins: Plugin[] = [
  {
    resolve: `gatsby-plugin-typegen`,
    options: {
      // ... customize options here
    },
  },
];

module.exports = {
  plugins,
};

Change the output path

{
  options: {
    outputPath: `src/__generated__/gatsby-types.ts`,
  },
}

Switch to Flow

{
  options: {
    language: `flow`,
    outputPath: `src/__generated__/gatsby-types.flow.js`,
  },
}

Emit schema as GraphQL SDL

{
  options: {
    emitSchema: {
      `src/__generated__/gatsby-schema.graphql`: true,
    },
  },
}

Visualized via GraphQL Voyager.

ESLint

You can use the extracted schema file for eslint-plugin-graphql!

// gatsby-config.js

module.exports = {
  plugins: [
    // ...
    {
      resolve: `gatsby-plugin-typegen`,
      options: {
        emitSchema: {
          `src/__generated__/gatsby-introspection.json`: true,
        },
      },
    },
  ],
};

// .eslintrc.js

const path = require('path');

module.exports = {
  plugins: [
    'graphql'
  ],
  rules: {
    'graphql/template-strings': ['error', {
      env: 'relay',
      tagName: 'graphql',
      schemaJsonFilepath: path.resolve(__dirname, 'src/__generated__gatsby-introspection.json'),
    }],
  },
};

VSCode extension

I recommend to use Apollo GraphQL extension.

(YES, even this isn't Apollo project)

Install the extension.

Configure plugin to emit schema and plugin documents.

// gatsby-config.js

module.exports = {
  plugins: [
    // ...
    {
      resolve: `gatsby-plugin-typegen`,
      options: {
        emitSchema: {
          `src/__generated__/gatsby-introspection.json`: true,
        },
        emitPluginDocuments: {
          `src/__generated__/gatsby-plugin-documents.graphql`: true,
        },
      },
    },
  ],
};

Create apollo.config.js file in project root.

// apollo.config.js

module.exports = {
  client: {
    name: 'your-project-name',
    tagName: 'graphql',
    includes: [
      './src/**/*.{ts,tsx}',
      './src/__generated__/gatsby-plugin-documents.graphql',
    ],
    service: {
      name: 'GatsbyJS',
      localSchemaFile: './src/__generated__/gatsby-schema.graphql',
    }
  },
}

Reload VSCode & Enjoy!

TypeScript plugin

ts-graphql-plugin

TODO: Add config example

Available options

Checkout the full documentation of plugin options from src/types.ts.

Disclaimer

This plugin is a bit opinionated about how integrate GatsbyJS and codegen.

You cannot customize plugins and its options of graphql-codegen because this plugin is built for ONLY GatsbyJS.

If you wanna use codegen with other plugins (e.g. React Apollo), you can use @graphql-codegen/cli for it.

Or gatsby-plugin-graphql-codegen gives you a more flex options.

Acknowledgements

graphql-code-generator by @dotansimha
This is where the plugin started.
gatsby-plugin-graphql-codegen by @d4rekanguok
has almost same goal, but little bit different how handle GraphQL documents. @d4rekanguok also makes great contribution to this plugin as well!
gatsby-plugin-extract-code by @NickyMeuleman
Gives me idea about schema extraction.

License

nimblelight/gatsby-plugin-typegen

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages