# graphql-code-generator-webpack-plugin

> Runs graphql-codegen as part of the Webpack compilation process

Latest version **1.0.5** (published 2019-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install graphql-code-generator-webpack-plugin
pnpm add graphql-code-generator-webpack-plugin
yarn add graphql-code-generator-webpack-plugin
bun add graphql-code-generator-webpack-plugin
```

## 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 | 1.0.5 |
| Published | 2019-08-21 |
| First published | 2019-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Michael Ventnor |
| Maintainers | mikeventnor |
| Keywords | graphql, webpack, typescript, flow, types, codegen |

## Links

- npm: https://www.npmjs.com/package/graphql-code-generator-webpack-plugin
- Repository: https://github.com/mventnor/graphql-codegen-webpack-plugin
- npm.io page: https://npm.io/package/graphql-code-generator-webpack-plugin

## 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

- 1.0.5 (latest) — 2019-08-21
- 1.0.4 — 2019-08-20
- 1.0.3 — 2019-08-19
- 1.0.2 — 2019-08-19
- 1.0.1 — 2019-08-19
- 1.0.0 — 2019-08-19

## README

# graphql-code-generator-webpack-plugin

Runs [GraphQL Code Generator](https://github.com/dotansimha/graphql-code-generator) as part of the Webpack compilation process. It will run before type-checkers like fork-ts-checker-webpack-plugin.

## Usage

This plugin takes the same options as graphql-codegen, with one exception:
Instead of passing a GraphQL schema through `schema`, you pass the location to the schema file through `schemaFile`.

For details about graphql-codegen options, see the [graphql-codegen documentation](https://graphql-code-generator.com/docs/getting-started/programmatic-usage).

Install as a dev dependency:

```bash
npm install --save-dev graphql-code-generator-webpack-plugin
```

Then, add the plugin to the `plugins` array in your Webpack config. Also include the graphql-codegen plugins you wish to use:

```javascript
import GraphqlCodegen from "graphql-code-generator-webpack-plugin";

import * as GraphqlCodegenTypescript from "@graphql-codegen/typescript";
import * as GraphqlCodegenTypescriptResolvers from "@graphql-codegen/typescript-resolvers";

// ....

plugins: [
  new GraphqlCodegen({
    filename: path.join(__dirname, "./src/graphql/generated/graphql.ts"),
    schemaFile: path.join(__dirname, "./src/graphql/schema.graphql"),
    plugins: [
      {
        typescript: {}
      },
      {
        typescriptResolvers: {}
      }
    ],
    config: {
      avoidOptionals: true
    },
    pluginMap: {
      typescript: GraphqlCodegenTypescript,
      typescriptResolvers: GraphqlCodegenTypescriptResolvers
    }
  })
];
```

---
_Source: https://npm.io/package/graphql-code-generator-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._