Relay 使用 Babel 插件将 graphql
代码转换为 Relay 编译器生成的代码。
当您键入查询时:
graphql`
fragment MyComponent on Type {
field
}
`
这转化成"懒人"需要的生成的文件:
function () { return require('./__generated__/MyComponent.graphql'); }
首先,安装插件(通常为 devDependency
):
yarn add --dev babel-plugin-relay
然后,添加 "relay"
到.babelrc文件中的插件列表。
{ "plugins": [ "relay" ] }
注意, "relay"
插件应该在其他插件或预设之前运行,以确保graphql
模板代码正确转换。请参阅 关于此主题的文档。
通过一些额外的配置, "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", }] ] }