Nutritious Pumpkin Mash

    babel-plugin-transform-relay-hot

    1.0.4 • Public • Published

    babel-plugin-transform-relay-hot

    NPM version npm

    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 used setTimeout().unref() cause fs.watch blocks babel from exit.
      • You may disable watching by setting watchInterval: 0.
    • verbose
      • Type: 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 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

    Install

    npm i babel-plugin-transform-relay-hot

    DownloadsWeekly Downloads

    675

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • nodkz