# webpack-graphql-loader

> webpack graphql loader

Latest version **1.0.2** (published 2019-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-graphql-loader
pnpm add webpack-graphql-loader
yarn add webpack-graphql-loader
bun add webpack-graphql-loader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-04-23 |
| First published | 2017-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 172.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 63 |
| Author | Stephen Wan |
| Maintainers | stephen |

## Links

- npm: https://www.npmjs.com/package/webpack-graphql-loader
- Repository: https://github.com/stephen/graphql-loader
- Homepage: https://github.com/stephen/graphql-loader/
- Issues: https://github.com/stephen/graphql-loader/issues
- npm.io page: https://npm.io/package/webpack-graphql-loader

## Dependencies (3)

- [pify](https://npm.io/package/pify.md) ^3.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [apollo-codegen](https://npm.io/package/apollo-codegen.md) ^0.19.1

## Recent versions

- 1.0.2 (latest) — 2019-04-23
- 1.0.1 — 2019-04-16
- 1.0.0 — 2018-06-20
- 1.0.0-beta3 — 2018-06-18
- 1.0.0-beta2 — 2018-06-18
- 1.0.0-beta1 — 2018-06-18
- 0.1.2 — 2018-05-10
- 0.1.1 — 2018-04-30
- 0.1.0 — 2018-02-16
- 0.0.23 — 2018-01-19
- 0.0.22 — 2017-12-20
- 0.0.21 — 2017-12-20
- 0.0.20 — 2017-12-20
- 0.0.19 — 2017-12-01
- 0.0.18 — 2017-12-01
- … 16 more at https://npm.io/package/webpack-graphql-loader/versions

## README

# GraphQL Loader for Webpack

[![npm Version](https://img.shields.io/npm/v/webpack-graphql-loader.svg)](https://www.npmjs.com/package/webpack-graphql-loader)
[![Build Status](https://api.travis-ci.org/samsarahq/graphql-loader.svg?branch=master)](https://travis-ci.org/samsarahq/graphql-loader)

A webpack loader for `.graphql` query documents with first class support for **schema validation** and **fragments definitions**. `graphql-loader` works great with [thunder](https://github.com/samsarahq/thunder), [apollo-client](#output-string--document-defaultstring), and anywhere you might want to provide a GraphQL query document in the frontend.

## Installation

```bash
yarn add --dev webpack-graphql-loader # or npm install --save-dev webpack-graphql-loader
```

You will also need to install a copy of [`graphql`](https://www.npmjs.com/package/graphql), which is a peer dependency of this package.

```bash
yarn add --dev graphql # or npm install --save-dev graphql
```


## Configuration

Add `webpack-graphql-loader` to your webpack configuration:
```javascript
module.exports = {
  // ...
  module: {
    rules: [ // or "loaders" for webpack 1.x
      { test: /\.graphql?$/, loader: 'webpack-graphql-loader' }
    ]
  }
}
```

### Specifying options
You can also pass options to the loader via webpack options:
```javascript
module.exports = {
  // ...
  module: {
    rules: [ // or "loaders" for webpack 1.x
      {
        test: /\.graphql?$/,
        use: [
          {
            loader: 'webpack-graphql-loader',
            options: {
              // validate: true,
              // schema: "./path/to/schema.json",
              // removeUnusedFragments: true
              // etc. See "Loader Options" below
            }
          }
        ]
      }
    ]
  }
}
```

### Loader Options

#### schema _(string) (default="")_

The location of your graphql introspection query schema JSON file. If used with the `validate` option, this will be used to validate imported queries and fragments.

#### validate _(boolean) (default=false)_

If `true`, the loader will validate the imported document against your specified `schema` file.

#### output _("string" | "document") (default="string")_

Specifies whether or not the imported document should be a printed graphql string, or a graphql `DocumentNode` AST. The latter is useful for interop with [`graphql-tag`](https://github.com/apollographql/graphql-tag#webpack-preprocessing).

#### minify _(boolean) (default=false)_

If `true` and the `output` option is `string`, the loader will strip comments and whitespace from the graphql document strings.  This helps to reduce bundled code size.

#### removeUnusedFragments _(boolean) (default=false)_

If `true`, the loader will remove unused fragments from the imported document. This may be useful if a query is importing fragments from a file, but does not use all fragments in that file. Also see [this issue](https://github.com/apollographql/graphql-tag/issues/102).

## Import statements in `.graphql` files

The loader supports importing `.graphql` files from other `.graphql` files using an `#import` statement. For example:

`query.graphql`:
```graphql
#import "./fragments.graphql"

query {
  ...a
  ...b
}
```

`fragments.graphql`:
```graphql
fragment a on A {}
fragment b on A {
  foo(bar: 1)
}
```

In the above example, fragments `a` and `b` will be made available within `query.graphql`. Note that all fragments in the imported file should be used in the top-level query, or the `removeUnusedFragments` should be specified.

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