前言
在现代的前端开发中，GraphQL 已经成为了一个很常见的技术。它主要用于处理应用中不同数据源之间的数据交互问题。而 babel-relay-plugin 是一个 npm 包，它提供了一种将 GraphQL 到 JavaScript 的转化的方式。
本文将通过使用 babel-relay-plugin 进行 GraphQL 转化，实现一个真实的应用程序示例。在阅读完本文后，你将了解如何在你的项目中使用 babel-relay-plugin 并优雅地转化 GraphQL 查询。
安装
使用 npm 进行安装：
npm install --save-dev babel-relay-plugin
或者使用 yarn：
yarn add --dev babel-relay-plugin
配置
首先在项目的根目录下创建一个 .babelrc 文件，并添加以下代码：
{ "presets": ["@babel/env", "@babel/react"], "plugins": ["relay"] }
这段代码告诉 Babel 你的项目中使用了 React，并在项目中启用了 relay 插件。
示例
接下来，我们将为本文创建一个新的 React 应用程序并使用 babel-relay-plugin 转化 GraphQL 查询。我们将使用 GitHub API 中的一个 GraphQL 查询。代码如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- ------------- - ---- -------------- ----- ---------- - --------------------------------- ----- ------------ - ------------------------- ----- ----- - -------- ----- -------- - ------ - ----- - - -- -------- ----- - ------ - -------------- ------------------ ------------- -------------- ---------- ------ ----- -- -- - -- ------- - ------ ------------- ------------------------- - ---- -- -------- - ------ ---------------------- - ---- - ------ -------------------------------- - -- -- -- - ------ ------- ----展开代码
在上面的代码中，我们定义了 query 变量来表示需要查询的数据。这个查询返回了 viewer 的 login 字段。我们使用了 react-relay 的 QueryRenderer 组件来发起这个查询，并将返回的数据渲染到页面上。
但是，当我们运行上面的代码时，将会得到以下错误信息：
Uncaught Error: RelayModernRecord: Expected data for non-nullable field `node` on `PullRequestReview` to be non-null.
这是由于我们返回的数据没有满足 GraphQL schema 的要求。为了解决这个问题，我们需要使用 babel-relay-plugin 将 GraphQL 查询转化成包含 NodeType、NodeInterface 等字段的形式。
转化
在我们添加了 babel-relay-plugin 插件后，我们需要配置这个插件并指定作用于的 schema 文件。我们可以在 .babelrc 文件中添加以下代码：
{ "presets": ["@babel/env", "@babel/react"], "plugins": [ ["relay", { "schema": "./schema.graphql" }] ] }
上面的代码中，我们指定了 schema 文件的路径。我们还可以在这里指定其他 babel-relay-plugin 支持的配置选项。
接下来，我们需要运行一个命令来生成 GraphQL 的 NodeType 和 NodeInterface 的相关代码。我们使用如下命令：
./node_modules/.bin/babel src/ --out-dir build/
这个命令会将我们项目中的源代码进行处理，并将生成的代码输出到 build 目录下。具体路径需要根据你项目实际情况来配置。
现在，我们需要更新我们的代码，使用生成的类型和接口。我们需要将 QueryRenderer 的 environment 属性传递给 createEnvironment 方法，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- ------------- - ---- -------------- ------ - ----------------- - ---- ---------- ----- ---------- - --------------------------------- ----- ------------ - ------------------------- ----- ----- - -------- ----- -------- - ------ - ----- - - -- -------- ----- - ----- ----------- - ------------------- -------- - -------------- ------- ----------------- --------------- ------------------- -- ---- ----------- --- ------ - -------------- ------------------------- ------------- -------------- ---------- ------ ----- -- -- - -- ------- - ------ ------------- ------------------------- - ---- -- -------- - ------ ---------------------- - ---- - ------ -------------------------------- - -- -- -- - ------ ------- ----展开代码
我们将 QueryRenderer 的 environment 属性设为 createEnvironment 方法的返回结果。然后，我们从 ./relay 目录中导入 createEnvironment 方法。
-- -------------------- ---- ------- ------ - ------------ -------- ------------- ------ - ---- ---------------- -------- --------------------- ---------- - ------ ----------------------------- - ------- ------- -------- - --------------- ------------------- -- ----- ---------------- ------ --------------- ---------- --- ---------------- -- ----------------- - ------ -------- -------------------------- - ----- ------- - --------------------------- ------ --- ------------- -------- ------ --- --------- ---------------- --- -展开代码
上面的代码中，我们使用 relay-runtime 提供的不同的类来组合创建 environment。我们实现了 fetchQuery 函数，它会将 GraphQL 查询发送到服务器并返回响应。
现在，我们的代码已经可以正常地返回 GitHub 用户的登录名了。这就是使用 babel-relay-plugin 的 GraphQL 查询转化的全流程。
总结
在本文中，我们了解了 babel-relay-plugin 在将 GraphQL 查询转化为 JavaScript 代码时所起到的重要作用。我们还学习了如何在 React 应用程序中使用 babel-relay-plugin，以及如何通过定义 GraphQL schema 和生成 NodeType 和 NodeInterface 的代码来完善 GraphQL 的类型系统。在本文中，我们实现了一个实用的示例应用程序，通过它演示了本文中的所有技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67246
