React Relay: gulp で ビルドする

概要

Relay を gulp でビルドする方法です。

環境

• Relay : 0.5.0
• graphql : 0.4.12
• gulp : 3.9.0
• babel-relay-plugin : 0.4.1

前提

• schema の定義はできている
• React コンポーネントに GraphQL が記述されている (Relay.QL)

手順

1. schema.json を生成
2. GraphQL をコンパイル

schema.json を生成

graphql を使って schema.js から schema.json を生成します。

gulpfile.babel.js

import { graphql } from 'graphql';
import { introspectionQuery } from 'graphql/utilities';

import { Schema } from '../../web/static/js/schema';

gulp.task('generate-schema', () => {
  return graphql(Schema, introspectionQuery)
    .then(result => {
      if (result.errors)
        return console.error('[schema]: ERROR --', JSON.stringify(result.errors, null, 2));
      fs.writeFileSync(
        path.join(__dirname, '../../web/static/js/schema/schema.json'),
        JSON.stringify(result, null, 2)
      );
      return null;
    });
});

GraphQL をコンパイル

babelify (or babel) のプラグインに Relay のプラグインを指定します。
babelify なら transform の bebelify のかわりに babelify.configure( {plugins: [getbabelRelayPlugin(schema.data)]} ) を指定します。

gulpfile.babel.js

let getbabelRelayPlugin = require('babel-relay-plugin');
let schema = require('../../web/static/js/schema/schema.json');

browserify({
    entries: sourceFile,
    paths: ['.'],
    transform: [babelify.configure( {plugins: [getbabelRelayPlugin(schema.data)]} )]
  })
    .bundle()
    .pipe(source(destJsGraphql))
    .pipe(gulp.dest(dirDestJs));
});

最後に

GraphQL が普及すれば、JSX のように babel の標準プラグインで対応されるのでしょうか。

参考

• Babel Relay Plugin | Relay Docs
• fortruce/relay-skeleton