Notoriously Psychedelic Modules

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    GraphQL Loader for Webpack

    npm Version Build Status

    A webpack loader for .graphql query documents with first class support for schema validation and fragments definitions. graphql-loader works great with thunder, apollo-client, and anywhere you might want to provide a GraphQL query document in the frontend.


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

    You will also need to install a copy of graphql, which is a peer dependency of this package.

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


    Add webpack-graphql-loader to your webpack configuration:

    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:

    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.

    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.

    Import statements in .graphql files

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


    #import "./fragments.graphql"
    query {


    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.




    npm i webpack-graphql-loader

    DownloadsWeekly Downloads






    Unpacked Size

    176 kB

    Total Files


    Last publish


    • stephen
    • swan