什么是 usnews-apollo-client？
usnews-apollo-client 是一个 React 前端网络请求工具，它基于 apollo-client 构建而成。它可以帮助前端开发者简化网络请求的流程，同时在网络请求过程中，可以更好的处理数据响应。
如何安装 usnews-apollo-client？
你可以使用下面这个命令来完成 usnews-apollo-client 的安装：
npm install usnews-apollo-client --save
你也可以选择使用 yarn：
yarn add usnews-apollo-client
如何使用 usnews-apollo-client？
下面是一个简单的例子，它用来实现一个查询，查询一个用户的详细信息：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------------
------ - ------------------ - ---- -----------------------
------ --- ---- --------------
-- -- -- -------------
----- ------------ - --------------------
---- -------------------------------- -- ------- --- --
---
-- -- ------
----- -------------- - ----
----- ---------------- -------- -
-------- ---- -
--
----
-----
-
-
--
-- -- ----
------ ------- -------- ----------------- -
-- -- ----
----- - ----- -------- ----- - - ------------------------ -
---------- - --- ------------ --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
---
---- ------- ---------------- -----------------
----
--
-其中，第 1 步我们需要配置 apollo-client。它需要指定 GraphQL API 的地址。第 2 步我们需要编写一个查询的语句。第 3 步我们需要定义一个组件，这个组件通过 useQuery 进行数据的查询。当我们发起查询之后，useQuery 会返回一个 data 对象，其中包含了查询到的数据。useState 和 useEffect 是 Hooks 的另外两个核心函数，用来处理组件的状态和副作用。
进阶使用方法
编写 Mutation
一个 Mutation 代表了一个对数据进行变更的操作。例如，在我们的用户详情页中，我们需要提供一个修改用户信息的功能。下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------------
------ - ------------------ - ---- -----------------------
------ --- ---- --------------
-- -- -- -------------
----- ------------ - --------------------
---- -------------------------------- -- ------- --- --
---
-- -- -- --------
----- ----------- - ----
-------- --------------- -------- ------ -------- ------- -------- -
-------------- ---- ----- ------ ------ ------- -
--
----
-----
-
-
--
-- -- ----
------ ------- -------- ----------------- -
----- ---------- ------------ - ----------------------
----- ---------- ------------ - -------------------
----- ----------- ------------- - -------------------
-- -- ----
----- - ----- -------- ----- - - ------------------------ -
---------- - --- ------------ --
---
-- -- -- ------ --
----- ------------ - -------- --------- ------ ----------- -- - ------------
------------
-
------------ -- -- -
-------------------
--
-
--
-- --------- ------ ------------------
-- ------- ------ -------- -------
-- -- ----
-- ---------- -
------ -
-----
---- -----------------------
-------
------- --
------
-----------
----------------
------------- -- ----------------------------
--
--------
------
---- -----------------------
-------
-------- --
------
-----------
-----------------
------------- -- -----------------------------
--
--------
------
-------
------------------
----------- -- -
------------
---------- - --- ------------- ----- --------- ------ --------- --
---
--
-------------------
-
--------- - ------------- - ---------
---------
------------ -- --------- ----- -------
------
--
-
------ -
-----
------- ------- ---------------- ---------------------
------- ------------------ ----------- -- -------------------
----
---------
------
--
-编写 Subscription
一个 Subscription 可以用来订阅某个事件，当事件发生的时候，我们能够获取到事件的相关数据，从而更新组件的内容。下面是一个例子，我们可以在这个例子中订阅新用户的创建：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------------
------ - ------------------ - ---- -----------------------
------ --- ---- --------------
-- -- -- -------------
----- ------------ - --------------------
---- -------------------------------- -- ------- --- --
---
-- -- -- ------------
----- ------------ - ----
------------ ----------- -
----------- -
--
----
-----
-
-
--
-- -- ----
------ ------- -------- --------------- -
----- ---------- ------------ - -------------------
-- -- -- ------------
----- - ----- -------- ----- - - ----------------------------- -
------------------- -- ---------------- -- -- -
-- ----------------- -- ---------------------- -
------------------------- ------------------------------------
-
--
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
-------------------- -- -
-- --------------
--- ----- ----------- ------------
----
---
------
--
-总结
usnews-apollo-client 是一个方便前端开发者使用的网络请求工具。在代码示例中，我们演示了 useQuery、useMutation 和 useSubscription 这三个 Hooks 的使用方法。通过这些 Hooks，我们可以轻松地编写出网络请求的代码，并且利用 GraphQL，可以更好地管理响应数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571ff81e8991b448e846b