GraphQL Tools Webpack Loader

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

Slightly different fork of graphql-tag/loader.

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 below.

Given a file MyQuery.graphql

query MyQuery {
  ...
}

If you have configured the webpack @graphql-tools/webpack-loader, you can import modules containing graphQL queries. The imported value will be the pre-built AST.

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:

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

mutation upsertMenuMutation {
  upsertMenu {
    id
  }
}

fragment MenuFields on Menu {
  id
  name
}

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.

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