babel-plugin-transform-relay-hot
v1.0.4
Published
Wrapper for babel-relay-plugin which track changes in the graphql schema file and hot swap them without restart dev server with babel
Downloads
1,000
Maintainers
Readme
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
- Required
- Type:
String
- Path to graphql schema json/graphql file
watchInterval
- Type:
Number
- Default: 2000
- Time interval in milliseconds to check
mtime
of json file. Internally usedsetTimeout().unref()
causefs.watch
blocks babel from exit. - You may disable watching by setting
watchInterval: 0
.
- Type:
verbose
- Type:
Boolean
- Default: false
- Log to console when schema reloaded.
- Type:
- 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 in json
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
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'
]
}
🔥 js-graphql-intellij-plugin
GraphQL language support for IntelliJ IDEA and WebStorm, including Relay.QL tagged templates in JavaScript and TypeScript.
🔥 webpack-plugin-relay-touch-dependents
Trigger webpack rebuilds after your GraphQL Schema has been updated and saved to JSON..
License
MIT