# gatsby-plugin-graphql-codegen > Automate codegen for Gatsby via graphql-codegen Latest version **3.1.1** (published 2022-02-02) · MIT license · 0 weekly downloads ## Install ```sh npm install gatsby-plugin-graphql-codegen pnpm add gatsby-plugin-graphql-codegen yarn add gatsby-plugin-graphql-codegen bun add gatsby-plugin-graphql-codegen ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.1 | | Published | 2022-02-02 | | First published | 2019-08-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 13 | | Unpacked size | 33.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 120 | | Author | Derek Nguyen | | Maintainers | alvis, d4rek | | Keywords | gatsby, gatsby-plugin, typescript, graphql, graphql-codegen | ## Links - npm: https://www.npmjs.com/package/gatsby-plugin-graphql-codegen - Repository: https://github.com/d4rekanguok/gatsby-typescript - Homepage: https://github.com/d4rekanguok/gatsby-typescript#readme - Issues: https://github.com/d4rekanguok/gatsby-typescript/issues - npm.io page: https://npm.io/package/gatsby-plugin-graphql-codegen ## Dependencies (13) - [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) 4.0.8 - [@graphql-tools/load](https://npm.io/package/@graphql-tools/load.md) ^7.0.0 - [@graphql-tools/utils](https://npm.io/package/@graphql-tools/utils.md) ^8.0.0 - [@graphql-codegen/core](https://npm.io/package/@graphql-codegen/core.md) ^2.2.0 - [@graphql-tools/url-loader](https://npm.io/package/@graphql-tools/url-loader.md) 7.0.0 - 7.4.2 - [@graphql-codegen/typescript](https://npm.io/package/@graphql-codegen/typescript.md) ^2.0.0 - [@graphql-codegen/plugin-helpers](https://npm.io/package/@graphql-codegen/plugin-helpers.md) ^2.0.0 - [@graphql-tools/code-file-loader](https://npm.io/package/@graphql-tools/code-file-loader.md) ^7.0.0 - [@graphql-tools/json-file-loader](https://npm.io/package/@graphql-tools/json-file-loader.md) ^7.0.0 - [@graphql-tools/graphql-tag-pluck](https://npm.io/package/@graphql-tools/graphql-tag-pluck.md) ^7.0.0 - [@graphql-tools/graphql-file-loader](https://npm.io/package/@graphql-tools/graphql-file-loader.md) ^7.0.0 - [@graphql-codegen/typescript-operations](https://npm.io/package/@graphql-codegen/typescript-operations.md) ^2.0.0 ## Alternatives - [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads - [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads - [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads - [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads - [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads ## Recent versions - 3.1.1 (latest) — 2022-02-02 - 3.1.0 — 2021-11-03 - 3.0.0 — 2021-05-30 - 2.7.3 — 2021-05-30 - 2.7.1 — 2020-04-06 - 2.7.0 — 2020-03-30 - 2.6.1 — 2020-03-27 - 2.6.0 — 2020-03-23 - 2.5.0 — 2020-03-13 - 2.4.0 — 2020-03-04 - 2.3.0 — 2020-03-04 - 2.2.4 — 2020-03-03 - 2.2.3 — 2020-02-23 - 2.2.2 — 2020-02-09 - 2.2.1 — 2020-02-04 - … 5 more at https://npm.io/package/gatsby-plugin-graphql-codegen/versions ## README # Gatsby Typescript Graphql Codegen Automatic type generation for your graphql queries via [`graphql-code-generator`](https://github.com/dotansimha/graphql-code-generator) ## Installation ``` yarn add typescript gatsby-plugin-graphql-codegen ``` Add this to your gatsby config like any other plugins: ```js // gatsby-config.js module.exports = { plugins: [ `gatsby-plugin-graphql-codegen`, ] } ``` ### Options |key | default | value | |---|---|---| |options.codegen| `true` | enable / disable generating definitions for graphql queries| |options.documentPaths| 
['./src/**/*.{ts,tsx}',
'./.cache/fragments/*.js', 
'./node_modules/gatsby-*/**/*.js']
| The paths to files containing graphql queries.
⚠️ The default paths will be overwritten by the `documentPaths` you pass in, so please make sure to include *all* necessary paths ⚠️ |options.fileName| `graphql-type.ts` | path to the generated file. By default, it's placed at the project root directory & it should not be placed into `src`, since this will create an infinite loop| |options.codegenDelay| `200` | amount of delay from file change to codegen| |options.pluckConfig| 
{ globalGqlIdentifierName: "graphql", modules: [ { name: 'gatsby', identifier: 'graphql' } ] }
| options passed to [graphql-tag-pluck](https://github.com/ardatan/graphql-toolkit/tree/master/packages/graphql-tag-pluck) when extracting queries and fragments from documents | |options.failOnError (^2.5.0)| `process.env.NODE_ENV === 'production'` | Throw error if the codegen fails. By default only apply to production builds. |options.codegenConfig (^2.7.0)| `{}` | Add config directly to `graphql-codegen`. These key-value config will be applied to every `graphql-codegen` plugins. See [graphql-codegen docs on the config field](https://graphql-code-generator.com/docs/getting-started/config-field) | |options.codegenPlugins (^2.7.0)| `[]` | Add additional plugins to `graphql-codegen`. We use the same format as Gatsby's. See example usage below. |options.additionalSchemas (^2.6.0)| 
[]
| array of additional schemas (other than the schema used by gatsby queries) for which types should be generated for. This is useful when you use client-side queries (e.g. with apollo-client) where you are querying another schema/endpoint | #### Additional Schema Options (for `options.additionalSchemas`) |key | default | value | |---|---|---| |key| - | an unique key used internally by this plugin to identify different schemas| |fileName| graphql-types-${key}.ts | path to the generated file for this schema. By default, it's placed at the project root directory & it should not be placed into `src`, since this will create an infinite loop | |documentPaths| value of `options.documentPaths` | The paths to files containing graphql queries. See also `options.documentPaths` | |pluckConfig| - | options passed to [graphql-tag-pluck](https://github.com/ardatan/graphql-toolkit/tree/master/packages/graphql-tag-pluck) when extracting queries and fragments from documents | |schema| - | additional schema to process. Can either be an url, a path to a local schema definition (both `.json` and `.graphql` are supported) or an inline definition. See also https://github.com/ardatan/graphql-toolkit#-schema-loading | |codegenConfig (^2.7.0)| `{}` | See `codegenConfig` above |codegenPlugin (^2.7.0)| `{}` | See `codegenPlugin` above ## Example Setups ### Normal Usecase Set it & forget it ```js exports.default = { plugins: [ `gatsby-plugin-graphql-codegen`, ] } ``` ### Custom Filename & Location ```js exports.default = { plugins: [{ resolve: `gatsby-plugin-graphql-codegen`, options: { fileName: `./gatsby-graphql.ts`, } }] } ``` ### Gatsby-node.ts You have queries in your gatsby-node? We can take care of that. The experience is not 100% right now, but that'll change soon! ```js exports.default = { plugins: [{ resolve: `gatsby-plugin-graphql-codegen`, options: { fileName: `./gatsby-graphql.ts`, documentPaths: [ './src/**/*.{ts,tsx}', './node_modules/gatsby-*/**/*.js', './gatsby-node.ts', ], } }] } ``` ### Customize Graphql Codegen You want to pass additional config to `graphql-codegen`: ```js // additional plugins import { plugin as resolverPlugin } from '@graphql-codegen/typescript-resolvers' exports.default = { plugins: [{ resolve: `gatsby-plugin-graphql-codegen`, options: { codegenConfig: { // key-value configs that will be applied to every plugins. // Note: The example below is completely unnecessary, just a demonstration. typesPrefix: 'Hi' // -> import { HiImageQuery } from '../../graphql-types' }, codegenPlugins: [{ // built-in plugin. // Use `typescript` for `@graphql-codegen/typescript` // and `operations` for `@graphql-codegen/typescript-operations` resolve: 'typescript', options: { namingConvention: `lower-case#lowerCase`, } },{ // additional plugin resolve: resolverPlugin, options: { typesPrefix: 'I' } }] } }] } ``` ### Dual-Schema Setup If you use `graphql` on the client side, this is for you. ```js exports.default = { plugins: [{ resolve: `gatsby-plugin-graphql-codegen`, options: { additionalSchemas: [{ key: 'pokemon', fileName: './graphql-pokemon.ts', schema: 'https://graphql-pokemon.now.sh/', pluckConfig: { // config to ensure only queries using the `gql` tag are used for this schema globalGqlIdentifierName: 'gql', modules: [ { name: 'graphql-tag', identifier: 'gql', }, ], }, }], } }] } ``` ## Code generation By default, this plugin will build typing for your queries automatically to `graphql-types.d.ts` on every edit. Please note that the definition file **should not** be placed inside `src` since this triggers a never ending loop during development. In order to take advantage of the generated code, user needs to name their query: ```js // src/pages/index.tsx export const pageQuery = graphql` - query { + query BlogIndex { site { siteMetadata { title } } ... ``` ...and import it from the generated type file: ```js // src/pages/index.tsx import { PageProps } from "gatsby"; import { BlogIndexQuery } from '../graphqlTypes' const BlogIndex: React.FC> = ({ data, location }) => { ... } ``` --- _Source: https://npm.io/package/gatsby-plugin-graphql-codegen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._