gql-loader

GQL loader allows you to load graphql queries from .graphql into your JS. It also has special syntax to allow importing of other files such as fragments.

Install

npm install -S gql-loader

or

yarn add gql-loader

Config

Add Loader to webpack config

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gql-loader',
    options: {
      baseDir: path.resolve(`${__dirname}/../src/graphql`)
    }
  }
}

Options

Name	Default	Description
baseDir	<Project Dir>/src/graphql	The base directory to look for graphql files if using special keywords.

We only use baseDir if you use a shortcut keyword such as fragments/, queries/, or mutations/. If your import / require starts with one of those then we use the baseDir to build absolute path.

How to use

Just require your graphql query file path. require('queries/myQuery.graphql').

#import "fragments/myFragment.graphql"
#import "../fragments/myOtherFragment.graphql"

query MyQuery($myVar: String) {
  test(myVar: $myVar)
      ...myFragment
      ...myOtherFragment
    }
  }
}

As you can see there is special #import syntax at the top of the file. By using #import "my/fragment/path.graphl it will load the file and embed in place of the import statement. You can use relative path from this file, or use one of the special absolute path keywords.