babel-plugin-relay

Relay 使用 Babel 插件将 graphql 代码转换为 Relay 编译器生成的代码。

当您键入查询时:

graphql`
  fragment MyComponent on Type {
    field
  }
`

这转化成"懒人"需要的生成的文件：

function () {
  return require('./__generated__/MyComponent.graphql');
}

设置babel-plugin-relay#

首先，安装插件(通常为 devDependency):

yarn add --dev babel-plugin-relay

然后，添加 "relay" 到.babelrc文件中的插件列表。

{
  "plugins": [
    "relay"
  ]
}

注意， "relay" 插件应该在其他插件或预设之前运行，以确保graphql 模板代码正确转换。请参阅 关于此主题的文档。

使用 Relay Classic #

通过一些额外的配置， "relay" 插件也可以翻译 Relay Classic Relay.QL 代码。最重要的是，将您的GraphQL schema 引用为json文件或graphql schema 文件。

{
  "plugins": [
    ["relay", {"schema": "path/schema.graphql"}]
  ]
}

请注意，这替换了旧版本的 Babel Relay 插件。没有必要包含两个插件。

在 "兼容模式"中使用转换 #

将 Relay Classic 应用程序逐步转换为 Relay Modern时, ，如果配置为使用兼容性模式，graphql 代码可以被转换为 两个 运行时都可用:

{
  "plugins": [
    ["relay", {"compat": true, "schema": "path/schema.graphql"}]
  ]
}

附加选项 #

Relay Classic 和 Relay 兼容模式可以内联生成的内容， 并可能捕获并记录任何检测到的GraphQL验证错误，从而使这些错误在运行时抛出。

编译生产部署代码时，可以将该插件配置为立即在遇到验证问题时抛出。可以通过以下选项为不同环境进一步定制插件：

{
  "plugins": [
    ["relay", {
      "compat": true,
      "schema": "path/schema.graphql",
    }]
  ]
}