Babel 6 plugin for transforming graphql
literals and Relay.QL
tagged templates (when "compat": true
). It uses json 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.
yarn add babel-plugin-transform-relay-hot --dev
or
npm install babel-plugin-transform-relay-hot --save-dev
{
"plugins": [
["transform-relay-hot", {
"schema": "./build/schema.graphql.json",
"watchInterval": 2000,
"verbose": true
}],
]
}
schema
- 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 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.
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)
);
}
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 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,
}),
]
}
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'
]
}
GraphQL language support for IntelliJ IDEA and WebStorm, including Relay.QL tagged templates in JavaScript and TypeScript.
Trigger webpack rebuilds after your GraphQL Schema has been updated and saved to JSON..
MIT