GraphQL 是一种强类型的查询语言，可以用于构建 API。然而，与 REST API 相比，GraphQL 查询的性能可以变得相当糟糕。这是因为在默认情况下，GraphQL 服务器会返回完整的响应，而且每个属性只能由一个字段进行调用。这意味着你需要调用多个字段来获取你所需要的信息。这样的查询带来了许多重复的数据和调用，导致查询变得缓慢且效率不高。
使用 Relay Modern 可以帮助解决这个问题，它是 Facebook 推出的新版本的 Relay 框架。
什么是 Relay Modern？
Relay Modern是一个JavaScript框架，它可以协调React和GraphQL请求。这个框架对于移动应用程序和其他网络感知应用程序非常有用，这些应用程序需要快速提供信息而不会导致不必要的响应延迟。它具有更快的性能，更容易使用和更好的可维护性。
如何使用 Relay Modern？
使用 Relay Modern 可以极大地提高GraphQL查询的效率，提高在前端调用GraphQL查询时的速度。根据官方文档，你可以按如下步骤来使用 Relay Modern：
第一步：安装 Relay Modern
你可以使用 npm 或 yarn 来安装了解你的应用程序所需的依赖项：
$ npm install --save react-relay
第二步：创建一个 Relay Modern 环境
relay-runtime 包中提供了创建一个包含网络层、环境和 store 的对象的能力：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ ----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ---------------
----------
---
------------------ -- -
------ ----------------
---
-
----- ----------- - --- -------------
-------- ---------------------------
------ --- --------- ----------------
---第三步：创建一个 GraphQL 查询
你可以使用 graphql-tag 从字符串创建一个 GraphQL 查询。这个库会把一个 GraphQL 查询字符串转换成一个 AST，然后可以被使用来回答一个查询：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------- - --------
----- ------- -
----- -
-----
------ -
----
-----
-
-
-
--第四步：创建一个 React 组件
Relay 中的组件是通过一个函数调用来创建的，这个函数返回一个被渲染的 React 组件和一些配置：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------------ ------- - ---- --------------
-------- ------ ---- -- -
------ -
-----
---------------------
---
------------------ ---------------------
----
------
--
-
----- --------------------- - ----------------------------- -
----- --------
-------- --------- -- ---- -
-----
------ -
----
-----
-
-
--
---
------ ------- ----------------------第五步：在 React 组件中使用 Relay
将组件与查询相关联：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- --------------
------ - ----------- - ---- ----------
------ ---- ---- --------------------
------ ------- -------- ----- -
------ -
--------------
-------------------------
---------------
--------------
---------- ------ ----- -- -- -
-- ------- -
------ ------------------
-
-- -------- -
------ ----------------------
-
------ ----- ------------------ ---
--
--
--
-总结
Relay Modern 是一个出色的工具，可以帮助前端开发者在 GraphQL 查询时提高效率。本文中我们介绍了 Relay Modern 的使用，并且提供了一些示例代码帮助您开始使用它。在您的下一个前端项目中使用 Relay Modern，看看它是否能提高您的开发体验和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6652ce21d3423812e47542ef