GraphQL 是一个用于 API 的查询语言，可以让客户端精确地请求需要的数据，而不是像 REST API 那样返回大量不必要的数据。在前端开发中，使用 GraphQL 可以提高应用程序的性能和可维护性。而在 JavaScript 中，有两个主要的 GraphQL 客户端库：Apollo 和 Relay。
Apollo
Apollo 是一个流行的 GraphQL 客户端库，它提供了一系列功能，包括缓存、分页、错误处理和实时更新等。使用 Apollo 可以轻松地将 GraphQL 查询集成到 JavaScript 应用程序中。
安装
要使用 Apollo，需要安装 apollo-client 和 graphql 两个依赖项：
npm install apollo-client graphql
基本用法
使用 Apollo 的第一步是创建一个 ApolloClient 实例，并将其连接到 GraphQL 服务器：
-- -------------------- ---- -------
------ - ------------- -------------- -------------- - ---- -----------------
------ - ---------- - ---- ------------------------------
----- -------- - ----------------
---- -------------------------------
---
----- -------- - -------------- - ------- -- -- -
----- ----- - ------------------------------
------ -
-------- -
-----------
-------------- ----- - ------- --------- - --
-
--
---
----- ------ - --- --------------
----- --------------------------
------ --- ---------------
---在这个例子中，我们使用了 createHttpLink 来创建一个连接到 GraphQL 服务器的链接，并使用 setContext 将用户的 JWT 认证令牌添加到请求头中。最后，我们创建了一个 ApolloClient 实例，并将链接和缓存传递给它。
接下来，我们可以使用 useQuery 钩子来发送查询并获取数据：
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--
-------- ---------- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
-------------------- -- -
--- ------------------------- -------------------
---
-----
--
-在这个例子中，我们使用了 gql 函数来定义一个名为 getUsers 的查询，并使用 useQuery 钩子来发送查询并获取数据。我们还检查了 loading 和 error 属性以处理异步操作的状态。
缓存
Apollo 还提供了缓存功能，可以在多个组件之间共享数据。缓存是根据查询结果自动生成的，可以在查询时自动使用缓存数据，而不必每次都向服务器发出请求。在某些情况下，缓存可以大大提高应用程序的性能。
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
----- -------- - ----
----- ---------------- ---- -
-------- -------- -
--
----
-----
-
-
--
-------- ------------- ------ -- -
----- - -------- ------ ---- - - ------------------ -
---------- - ------ --
------------ -------------------
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
-------------------------
--------- ---------------------
------
--
-在这个例子中，我们使用了 fetchPolicy: 'cache-and-network' 来告诉 Apollo 在查询时同时使用缓存和网络请求。这意味着如果缓存中已经有数据，Apollo 将首先返回缓存数据，然后再向服务器发出请求来更新数据。
实时更新
Apollo 还提供了实时更新功能，可以在服务器更新数据时立即更新客户端。这可以使用 useSubscription 钩子来实现。
-- -------------------- ---- -------
------ - ---------------- --- - ---- -----------------
----- ----------- - ----
------------ ---------- -
---------- -
--
----
---------
-
-
--
-------- ------------- -
----- - -------- ------ ---- - - -----------------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
---------------------------- -- -
--- ------------------------------------
---
-----
--
-在这个例子中，我们使用了 useSubscription 钩子来订阅 newMessage 事件，并在服务器更新数据时立即更新客户端。这可以让我们构建实时聊天应用程序等实时应用程序。
Relay
Relay 是 Facebook 开发的另一个流行的 GraphQL 客户端库，它专门为 React 应用程序设计。与 Apollo 不同，Relay 需要使用 GraphQL schema 来生成查询和缓存数据，并使用 GraphQL 编译器将查询转换为可执行的代码。
安装
要使用 Relay，需要安装 relay-compiler、relay-runtime 和 babel-plugin-relay 三个依赖项：
npm install relay-compiler relay-runtime babel-plugin-relay
基本用法
使用 Relay 的第一步是创建一个 RelayEnvironment 实例，并将其连接到 GraphQL 服务器：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ ----------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ---------------
---------
--
---------------- -- -
------ ----------------
---
-
----- ----------- - --- -------------
-------- ---------------------------
------ --- --------- ---------------
---在这个例子中，我们使用 fetchQuery 函数来发送 GraphQL 查询，并将其传递给 RelayEnvironment 实例。
接下来，我们需要定义一个 QueryRenderer 组件，并使用 createFragmentContainer 函数来定义查询的数据模型：
-- -------------------- ---- -------
------ - -------------- ------- - ---- --------------
----- -------- - -- ----- -- -- -
----
--------------- -- -
--- ------------------------- -------------------
---
-----
--
----- ---------------- - --------------------------------- -
------ --------
-------- -------------- -- ---- -------------- ----- -
--
----
-----
-
-
---
----- --------- - --------
----- ------------- -
----- -
-----------------
-
-
--
-------- ----- -
------ -
--------------
-------------------------
-----------------
---------- ------ ----- -- -- -
-- ------- ------ ------------------
-- -------- ------ ----------------------
------ ----------------- ------------------- ---
--
--
--
-在这个例子中，我们使用 QueryRenderer 组件来发送查询并获取数据。我们还使用 createFragmentContainer 函数来定义查询的数据模型，并在 UserList 组件中使用它来渲染用户列表。
缓存
与 Apollo 类似，Relay 也提供了缓存功能，可以在多个组件之间共享数据。缓存是根据查询结果自动生成的，可以在查询时自动使用缓存数据，而不必每次都向服务器发出请求。
-- -------------------- ---- -------
------ - -------------------------- ------- - ---- --------------
----- -------- - -- ------ -------- -- -- -
-----
----
--------------- -- -
--- ------------------------- -------------------
---
-----
------- ----------------------- -------------
------
--
----- ------------------ - ----------------------------------- -
------ --------
-------- -------------- -- ---- -------------- ----- -
--
----
-----
-
-
-- -
---------- ----------
----------------------------- -
------ ------------
--
------------------- - ------ ------ -- ------------------ -
------ -
---------------------
------
------
--
--
------ --------
----- ------------------------
------- -----
-------- ------
- -
------
------ -------
------ -------
- ---------------- ----------------- -
-------- -
-----------
---------
-
----- -
---- -
-----------------
-
-
-
-
-
---
-------- ----- -
------ -
--------------
-------------------------
-----------------
---------- ------ ----- -- -- -
-- ------- ------ ------------------
-- -------- ------ ----------------------
------ -
-------------------
-------------------
------------ -- -
----- - --------- - - ---------------------
----- ----- - ---
----------------------------
------------
------
----------
- ------ --------- -
--
--
--
--
--
--
--
-在这个例子中，我们使用 createPaginationContainer 函数来定义分页查询，并在 UserList 组件中使用它来渲染用户列表。我们还使用 loadMore 函数来加载更多数据，并在查询时自动使用缓存数据，而不必每次都向服务器发出请求。
实时更新
Relay 还提供了实时更新功能，可以在服务器更新数据时立即更新客户端。这可以使用 requestSubscription 函数来实现。
-- -------------------- ---- -------
------ - -------------------- ------- - ---- --------------
----- ----------- - --------
------------ ---------- -
---------- -
--
----
---------
-
-
--
-------- ------------- -
----- ---------- ------------ - -------------
------------ -- -
----- ------------ - --------------------
------------
-
------------- ------------
---------- ---
-------- ----- -- -
----- ---------- - ---------------------------------
------------------------- -------------
-
-
--
------ -- -- -
-----------------------
--
-- ----
------ -
----
--------------------- -- -
--- ------------------------------------
---
-----
--
-在这个例子中，我们使用 requestSubscription 函数来订阅 newMessage 事件，并在服务器更新数据时立即更新客户端。我们还使用 useEffect 钩子来启动订阅，并在组件卸载时停止订阅。
总结
Apollo 和 Relay 都是流行的基于 JavaScript 的 GraphQL 客户端库，提供了一系列功能，包括缓存、分页、错误处理和实时更新等。使用这些客户端库可以轻松地将 GraphQL 查询集成到 JavaScript 应用程序中，并提高应用程序的性能和可维护性。无论选择哪个客户端库，都需要根据具体的应用程序需求来选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507c5e895b1f8cacd303b58