babel-plugin-transform-relay-hot

babel-plugin-transform-relay-hot

Babel 6 plugin for transforming Relay.QL tagged templates using json file with GraphQL schema. This plugin wraps standard babelRelayPlugin. Each time the schema changes, the wrapper updates instance of babelRelayPlugin with new schema without completely restarting dev server.

Install

yarn add babel-plugin-transform-relay-hot --dev

or

npm install babel-plugin-transform-relay-hot --save-dev

Usage with .babelrc

{
  "plugins": [
    ["transform-relay-hot", {
      "schemaJsonFilepath": "./build/schema.graphql.json",
      "watchInterval": 2000
    }],
  ]
}

Options

• schemaJsonFilepath
  • Required
  • Type: String
  • Path to graphql schema json file
• watchInterval
  • Type: Number
  • Default: 2000
  • Time interval in milliseconds to check mtime of json file. Internally used setTimeout().unref() cause fs.watch blocks babel from exit.
  • You may disable watching by setting watchInterval: 0.
• Also you may define additional options from babelRelayPlugin

How to generate graphql.schema.json file

You may use webpack-plugin-graphql-schema-hot or do it manually:

import fs from 'fs';
import path from 'path';
import { graphql, introspectionQuery } from 'graphql';
import Schema from './schema';

export default async function generateSchema() {
  const result = await (graphql(Schema, introspectionQuery));
  fs.writeFileSync(
    path.join(__dirname, './build/schema.graphql.json'),
    JSON.stringify(result, null, 2)
  );
}

Recommended modules

webpack-plugin-graphql-schema-hot

Webpack plugin which track changes in your schema files and generate json and txt files. webpack-plugin-graphql-schema-hot can freeze Webpack, while this plugin catch changes from json file. For this you need set waitOnStart and waitOnRebuild options (in Webpack plugin) equal to watchInterval (from this babel plugin):

import path from 'path';
import WebpackPluginGraphqlSchemaHot from 'webpack-plugin-graphql-schema-hot';

const config = {
  // ...
  plugins: [
    new WebpackPluginGraphqlSchemaHot({
      schemaPath: path.resolve(__dirname, '../schema/index.js'),
      output: {
        // json file path should be equal to `schemaJsonFilepath`
        json: path.resolve(__dirname, '../build/schema.graphql.json'),
        txt: path.resolve(__dirname, '../build/schema.graphql.txt'),
      },
      runOnStart: true,
      waitOnStart: 2000, // <----- value from `watchInterval`
      waitOnRebuild: 2000, // <----- value from `watchInterval`
      verbose: true,
    }),
  ]
}

eslint-plugin-graphql

For eslint checks of Relay.QL tagged templates you may use eslint-plugin-graphql. It also tracks changes of graphql schema json file with following config:

// In a file called .eslintrc.js
const path = require('path');

module.exports = {
  parser: "babel-eslint",
  rules: {
    "graphql/template-strings": ['error', {
      env: 'relay',
      schemaJsonFilepath: path.resolve(__dirname, './build/schema.graphql.json'),
    }]
  },
  plugins: [
    'graphql'
  ]
}

License

MIT

Changelog

0.0.3 (January 28, 2017)

• fix: refactor code due eslint errors