入门 - Relay 文档

Babel Relay 插件

babel-relay-plugin 已被弃用. Relay Classic请使用babel-plugin-relay 插件。

Relay 使用 babel 插件将 Relay.QL 字符串模板转换为描述每个查询的JavaScript代码,并包括 GraphQL schema 的数据。

当你像这样输入查询:

Relay.QL`
  fragment on User {
    # ...
  }
`

这被转换成一个立即调用的函数:

(function() {
  // Return a description of the query ...
})();

用法 #

现在入门最简单的方法是使用 Relay 入门工具包 - 这包括一个示例模版文件,并使用 babel-relay-plugin npm 模块来转换查询。

React Native 配置 #

babel-relay-plugin 之前必须运行 react-native Babel . 所以, 在 .babelrc"react-native" 必须放在 babelRelayPlugin之后。

{
  "plugins": [
    "relay"
  ],
  "presets": [
    "react-native"
  ]
}

原因是如果 babel-plugin-relayes2015-template-literals 转换之前不运行,它将不会正确转换 Relay.QL 模版。 另外 Babel 6 中, 您无法控件插件顺序。 所以在 React Native 中, 插件在 .babelrc 项目之前加载 .babelrc, 不可能使用 Babel Relay Plugin 而不覆盖整个翻译列表。

Schema JSON #

该插件需要了解您 schema - schemaData 在上述代码段中。获取此信息有两种方法,具体取决于GraphQL实现。

使用 graphql #

使用 introspectionQuery 来为 Babel Relay 插件产生一个 Schema JSON , 并使用 printSchema 以生成用户可读类型系统:

import fs from 'fs';
import path from 'path';
import {graphql}  from 'graphql';
import {introspectionQuery, printSchema} from 'graphql';

// Assume your schema is in ../data/schema
import {schema} from '../data/schema';
const yourSchemaPath = path.join(__dirname, '../data/schema');

// Save JSON of full schema introspection for Babel Relay Plugin to use
graphql(schema, introspectionQuery).then(result => {
  fs.writeFileSync(
    `${yourSchemaPath}.json`,
    JSON.stringify(result, null, 2)
  );
});

// Save user readable type system shorthand of schema
fs.writeFileSync(
  `${yourSchemaPath}.graphql`,
  printSchema(schema)
);

有关如何加载 schema.js 文件的完整示例,请运行查询来获取 schema 信息, 并保存到 JSON 文件中, 查看 入门工具包.

使用其他GraphQL实现 #

I如果您正在使用不同的GraphQL服务器实现,我们建议您调整上述示例以从GraphQL服务器加载 schema (例如,通过HTTP请求),然后将结果另存为JSON。

使用的示例 fetch 如下:

const fetch = require('node-fetch');
const fs = require('fs');
const {
  buildClientSchema,
  introspectionQuery,
  printSchema,
} = require('graphql/utilities');
const path = require('path');
const schemaPath = path.join(__dirname, 'schema');

const SERVER = 'http://example.com/graphql';

// Save JSON of full schema introspection for Babel Relay Plugin to use
fetch(SERVER, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({'query': introspectionQuery}),
}).then(res => res.json()).then(schemaJSON => {
  fs.writeFileSync(
    `${schemaPath}.json`,
    JSON.stringify(schemaJSON, null, 2)
  );

  // Save user readable type system shorthand of schema
  const graphQLSchema = buildClientSchema(schemaJSON.data);
  fs.writeFileSync(
    `${schemaPath}.graphql`,
    printSchema(graphQLSchema)
  );
});
入门 - Relay 文档
入门 - Relay 文档