vitorluizc/graphql-raw-loader

:meat_on_bone: With Webpack, loads GraphQL files as raw strings and handle it's import directive & comment statement.

GraphQL raw loader

Load GraphQL files as raw strings and handle it's import directive & comment statement.

Installation

Install it using NPM/Yarn.

# using NPM
npm i -D graphql-raw-loader

# using Yarn
yarn add graphql-raw-loader --dev

Configuration

Add graphql-raw-loader to your webpack configuration:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(graphql|gql)$/,
        loader: 'graphql-raw-loader'
      }
    ]
  }
}

Usage example

fragment UserProfile on User {
  # Some fields.
}

query Users {
  users () {
    ...UserProfile @import(from: "./UserProfile.graphql")
  }
}

import query from './User.graphl'

export const getUsers = async () => {
  const response = await fetch('/api/graphql', {
    body: JSON.stringify({ query }),
    headers: {
      'Content-Type': 'application/json',
    },
  })
  const users = await response.json()
  return users
}

Importing on GraphQL

Officially there's no way to import GraphQL files inside each other. Other loaders fixed it by parsing import statement inside a comment.

Also, theres a thread about implementing import statements on GraphQL. One of the best suggestions is about using a directive to import fragments.

This loader supports both ways. 😎

Using comment import statement

# import "./UserDataFragment.graphql"
# The comment statement above is importing a file with UserDataFragment fragment
# inside it.

query Users {
  users (is_active: True) {
    data {
      ...UserDataFragment
    }
  }
}

Using @import directive

query Users {
  users (is_active: True) {
    data {
      ...
    }
    ...PaginationFragment @import(from: "./PaginationFragment.graphql")
    # The directive above is importing a file with PaginationFragment fragment
    # inside it.
  }
}

graphql-raw-loader's Issues

Import a file just once

Importing, using comment or directive, a file more than once results into repeated concatenated bundle. This breaks GraphQL.

So,

query GetA ($page: Int = 1, $limit: Int = 10, $term: String, $isSearch: Boolean = false) {
  getA (page: $page, limit: $limit) @skip(if: $isSearch) {
    ...FragmentA @import(from: "./FragmentA.graphql")
  }
  searchA (page: $page, limit: $limit, term: $term) @include(if: $isSearch) {
    ...FragmentA @import(from: "./FragmentA.graphql")
  }
}

results into

module.exports = [
  require('./FragmentA.graphql'),
  require('./FragmentA.graphql'), `
  query GetA ($page: Int = 1, $limit: Int = 10, $term: String, $isSearch: Boolean = false) {
    getA (page: $page, limit: $limit) @skip(if: $isSearch) {
      ...FragmentA
    }
    searchA (page: $page, limit: $limit, term: $term) @include(if: $isSearch) {
      ...FragmentA
    }
  }
`].join('\n\n')

We need some kind of cache to import a file just once.

Add unit tests

It need to be tested.

ava is a great option to write unit tests, it runs parallel tests and don't mess up the global scope.

• Write unit tests
• Add to Travis CI