@graphql-tools/webpack-loader/README.md

A set of utils for faster development of GraphQL tools

# GraphQL Tools Webpack Loader

A webpack loader to preprocess GraphQL Documents (operations, fragments and SDL)

Slightly different fork of
[graphql-tag/loader](https://github.com/apollographql/graphql-tag/pull/304).

    npm install @graphql-tools/webpack-loader

How is it different from `graphql-tag`? It removes locations entirely, doesn't include sources
(string content of imported files), no warnings about duplicated fragment names and supports more
custom scenarios.

## Options

- `noDescription` (_default: `false`_) - strips descriptions from SDL documents. Has no effect on
  operations or fragments.
- `noEmptyNodes` (_default: `false`_) - strips empty `arguments`, `directives`, and
  `variableDefinitions` from SDL documents. Has no effect on operations or fragments.
- `noLoc` - accepted for compatibility. Location information is always stripped.
- `replaceKinds` (_default: `false`_) - replaces `"kind": "Document"` strings in the emitted AST
  with `Kind.DOCUMENT` references from `graphql/language/kinds`.
- `esModule` (_default: `false`_) - emit `export default` instead of `module.exports`. `#import`
  then reads the default export of the imported document.
- `importHelpers` (_default: `false`_) - `require` `useUnique` from
  `@graphql-tools/webpack-loader-runtime` instead of inlining the helper.

## Importing GraphQL files

_To add support for importing `.graphql`/`.gql` files, see
[Webpack loading and preprocessing](#webpack-loading-and-preprocessing) below._

Given a file `MyQuery.graphql`

```graphql
query MyQuery {
  ...
}
```

If you have configured
[the webpack @graphql-tools/webpack-loader](#webpack-loading-and-preprocessing), you can import
modules containing graphQL queries. The imported value will be the pre-built AST.

```ts
import MyQuery, { MyQuery as NamedMyQuery } from './query.graphql'
```

A file may contain more than one operation. The default export is the whole document. Each named
operation and fragment is also exported under its GraphQL name, with only the fragments that
operation uses:

```graphql
# menuMutations.graphql
mutation deleteMenuMutation {
  deleteMenu {
    ...MenuFields
  }
}

mutation upsertMenuMutation {
  upsertMenu {
    id
  }
}

fragment MenuFields on Menu {
  id
  name
}
```

```ts
import { deleteMenuMutation, MenuFields, upsertMenuMutation } from './menuMutations.graphql'
```

A fragment brought in with `#import` is also exported under its GraphQL name from the importing
file, after the imported definitions are appended.

`@graphql-tools/jest-transform` uses this loader, so the same named imports work in Jest. Operations
in a multi-operation file must be named.

### Preprocessing queries and fragments

Preprocessing GraphQL queries and fragments into ASTs at build time can greatly improve load times.

#### Webpack loading and preprocessing

Using the included `@graphql-tools/webpack-loader` it is possible to maintain query logic that is
separate from the rest of your application logic. With the loader configured, imported graphQL files
will be converted to AST during the webpack build process.

```js
{
  loaders: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: '@graphql-tools/webpack-loader',
      options: {
        /* ... */
      }
    }
  ],
}
```