GraphQL 是一种用于 API 的查询语言，它可以让客户端指定需要哪些数据，避免了传统 RESTful API 中的过度获取数据的问题。然而，随着应用程序的增长，GraphQL 查询也会变得越来越复杂和庞大，这可能会导致性能下降。为了解决这个问题，Facebook 推出了 Relay Modern，一种用于构建高性能 GraphQL 应用程序的框架。
Relay Modern 简介
Relay Modern 是一个基于 React 的框架，它提供了一组工具来处理 GraphQL 查询和数据缓存。它的主要目标是提高 GraphQL 应用程序的性能和可维护性。相比于传统的 Relay，Relay Modern 有以下优点：
- 更好的性能：Relay Modern 支持查询预测和批处理，可以减少网络请求次数和数据传输量。
- 更好的可维护性：Relay Modern 采用了一种新的数据架构，使得数据的管理更加简单和灵活。
- 更好的开发体验：Relay Modern 提供了一组工具来自动生成代码和类型检查，可以减少手动编写代码的工作量。
使用 Relay Modern
要使用 Relay Modern，需要先安装相关的依赖包。可以使用 npm 或者 yarn 安装：
--- ------- ------ -----------
或者
---- --- -----------
安装好依赖包后，需要在应用程序中配置一个 Relay Environment。这个环境包含了 GraphQL API 的地址和其他配置信息。可以使用 createEnvironment 函数来创建一个 Relay Environment：
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ ----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ---------------
----------
---
---------------- -- -
------ ----------------
---
-
----- ------- - ---------------------------
----- ------ - --- ---------------
----- ----- - --- --------------
----- ----------- - --- -------------
--------
------
---
------ ------- ------------这段代码创建了一个基于 fetch 的 Network，并配置了一个 RecordSource 和一个 Store。最后，创建了一个 Environment 对象，将这些组件组合在一起。fetchQuery 函数是用来执行 GraphQL 查询的，它将查询发送到 /graphql 地址，并返回查询结果。
接下来，需要定义一个 GraphQL 查询。可以使用 GraphQL Tagged Template Literal 来定义查询：
------ - ------- - ---- --------------
----- ----- - --------
----- -------- -
----- -
--
-----
-------
-
-
--这个查询将返回所有文章的 id、标题和内容。
最后，在 React 组件中使用 QueryRenderer 来渲染查询结果：
------ ----- ---- --------
------ - ------------- - ---- --------------
------ ----------- ---- ----------------
------ ----- ---- -------------
-------- ----- -
------ -
--------------
-------------------------
-------------
---------- ------ ----- -- -- -
-- ------- -
------ ---------------------------
- ---- -- ------- -
----- - ----- - - ------
------ -
----
--------------- -- -
--- --------------
---------------------
-------------------------
-----
---
-----
--
- ---- -
------ ----------------------
-
--
--
--
-
------ ------- ----这个组件将会渲染所有文章的标题和内容。
Relay Modern 的优化技术
Relay Modern 提供了一些优化技术来提高 GraphQL 应用程序的性能。
查询预测
查询预测是一种技术，可以根据组件的渲染逻辑来预测需要哪些数据。这样可以避免不必要的网络请求和数据传输。Relay Modern 使用 QueryRenderer 组件来实现查询预测。QueryRenderer 会检查组件中使用到的所有 GraphQL 查询，并将这些查询合并成一个大的查询。然后，它将这个大的查询发送到服务器，并将查询结果缓存起来，以便后续使用。
批处理
批处理是一种技术，可以将多个查询合并成一个大的查询。这样可以减少网络请求次数和数据传输量。Relay Modern 使用 BatchHttpLink 组件来实现批处理。BatchHttpLink 会将多个查询合并成一个大的查询，并将这个大的查询发送到服务器。服务器会返回一个包含所有查询结果的数组。然后，BatchHttpLink 将这个数组拆分成多个查询结果，并将这些结果缓存起来，以便后续使用。
数据缓存
数据缓存是一种技术，可以将查询结果缓存起来，以便后续使用。Relay Modern 使用 Store 组件来实现数据缓存。Store 组件会将查询结果缓存到内存中，并提供一组 API 来读取和修改缓存中的数据。这样，当组件需要重新渲染时，它可以从缓存中读取数据，而不必重新发送查询。
示例代码
下面是一个使用 Relay Modern 的完整示例代码：
-- ------
------ ----- ---- --------
------ - ------------- - ---- --------------
------ ----------- ---- ----------------
------ ----- ---- -------------
-------- ----- -
------ -
--------------
-------------------------
-------------
---------- ------ ----- -- -- -
-- ------- -
------ ---------------------------
- ---- -- ------- -
----- - ----- - - ------
------ -
----
--------------- -- -
--- --------------
---------------------
-------------------------
-----
---
-----
--
- ---- -
------ ----------------------
-
--
--
--
-
------ ------- ------ -----------
------ - ------- - ---- --------------
----- ----- - --------
----- -------- -
----- -
--
-----
-------
-
-
--
------ ------- -------- --------------
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ ----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ---------------
----------
---
---------------- -- -
------ ----------------
---
-
----- ------- - ---------------------------
----- ------ - --- ---------------
----- ----- - --- --------------
----- ----------- - --- -------------
--------
------
---
------ ------- ------------总结
Relay Modern 是一个用于构建高性能 GraphQL 应用程序的框架。它提供了一组工具来处理 GraphQL 查询和数据缓存，并采用了一种新的数据架构，使得数据的管理更加简单和灵活。通过使用 Relay Modern，可以提高 GraphQL 应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65fbcbc6d10417a22275c5fd