Have ideas to improve npm?Join in the discussion! »


    1.3.0-next • Public • Published


    Generate TypeScript/Flow definitions from your gatsby queries.

    Export schema and apollo config file to give autocomplete feature in vscode through apollographql.vscode-apollo (https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo).


    npm install --save gatsby-plugin-codegen


    Currently the underlying apollo package uses a newer version of graphql. As a temporary workaround use yarn and add the resolution of the graphql package yourself.

    // In your package.json
    "dependencies": { ... },
    "resolutions": {
      "graphql": "^14.6.0"

    Because the apollo package is split in different packages, which require all the newest version of the apollo-language-server, it is not possible to revert these changes. Please let me know or provide a PR if you have a better idea.

    How to use

    // In your gatsby-config.js
    plugins: [
      // other plugins
        resolve: "gatsby-plugin-codegen",
        options: {}

    Available options

    Please check the documentation of apollo tooling (https://www.npmjs.com/package/apollo) for further explanation. This plugin creates an apollo config file (apolloConfigFile), a file from the gatsby schema (localSchemaFile) and the directory for the generated types (output).

    export interface PluginCodegenOptions {
      // Name of the generated apollo config file
      apolloConfigFile?: string;
      // apollo:codegen options configured for usage with gatsby, see defaultOptions
      addTypename?: boolean;
      excludes?: string[];
      includes?: string[];
      localSchemaFile?: string;
      output?: string;
      tsFileExtension?: string;
      watch?: boolean;
      tagName?: string;
      target?: "typescript" | "swift" | "flow" | "scala";
      // apollo:codegen additional options
      globalTypesFile?: string;
      mergeInFieldsFromFragmentSpreads?: boolean;
      namespace?: string;
      outputFlat?: boolean;
      passthroughCustomScalars?: boolean;
      useFlowExactObjects?: boolean;
      useReadOnlyTypes?: boolean;
      // Gatsby specific, not used in this plugin
      plugins?: unknown[];
    const defaultOptions = {
      apolloConfigFile: "apollo.config.js",
      addTypename: false,
      excludes: [],
      localSchemaFile: "./schema.json",
      output: "__generated__",
      target: "typescript",
      tagName: "graphql",
      tsFileExtension: "d.ts",
      includes: [
        // "./node_modules/gatsby-*/**/*.js" Performance reasons
      // True can result in missed error messages through the console
      // Set it the following way to catch the errors during the build and still have watch mode:
      // process.env.NODE_ENV === "development" ? true : false
      watch: false


    npm i gatsby-plugin-codegen

    DownloadsWeekly Downloads






    Unpacked Size

    25.6 kB

    Total Files


    Last publish


    • avatar