babel-plugin-transform-relay-hot
Babel 6 plugin for transforming
graphql
literals and Relay.QL
tagged templates (when "compat": true
). It uses json/graphql file with GraphQL schema. This plugin wraps babel-plugin-relay. Each time the schema file changes, the wrapper updates instance of babel-plugin-relay
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", {
"schema": "./build/schema.graphql",
"watchInterval": 2000,
"verbose": true
}],
]
}
Options
schema
String
- Path to graphql schema json/graphql filewatchInterval
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
.verbose
Boolean
- Default: false
- Log to console when schema reloaded.- Also you may define additional options from
babel-plugin-relay
Use
"compat": true
option for Relay Classic.How to generate schema.graphql
or schema.graphql.json
files
You may use webpack-plugin-graphql-schema-hot or do it manually:
import fs from 'fs';
import path from 'path';
import { printSchema } from 'graphql';
import Schema from './schema';
export default function generateSchema() {
fs.writeFileSync(
path.join(__dirname, './build/schema.graphql'),
printSchema(schema)
);
}
import fs from 'fs';
import path from 'path';
import { graphql, introspectionQuery } from 'graphql';
import Schema from './schema';
export default async function generateSchemaJson() {
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 tracks changes in your GraphQL Schema files and generates schema introspection injson
and txt
formats. 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: path.resolve(__dirname, '../build/schema.graphql.json'),
txt: path.resolve(__dirname, '../build/schema.graphql'),
},
runOnStart: true,
waitOnStart: 2000, // <----- value from `watchInterval`
waitOnRebuild: 2000, // <----- value from `watchInterval`
verbose: true,
}),
]
}
🔥 eslint-plugin-graphql
Foreslint
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'
]
}