前言
在现代 Web 开发中，前端技术栈变化十分迅速，每天都会有新的工具和框架出现。其中有一款让前端开发效率更高的工具就是 NPM(Node Package Manager)，这一工具可以为我们提供许多优秀的开源库和工具，降低我们的开发成本。而 @apollo/react-components 就是这其中的一款 React 组件库。
@apollo/react-components 是什么
@apollo/react-components 是由 Apollo 开源组织维护的一款基于 React 的组件库，主要用于与 GraphQL 数据层交互。它提供了许多高质量的 React 组件，方便我们在项目中使用 GraphQL 数据。
安装 @apollo/react-components
安装 @apollo/react-components 很简单，只需要在项目根目录的终端执行以下命令即可：
npm install @apollo/react-components
使用 @apollo/react-components
Query 组件
Query 组件可以很方便地从 GraphQL 服务器获取数据，主要用于数据展示。我们可以通过下面的代码来获取一个文章列表：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --- - ---- -----------------
------ - ----- - ---- ---------------------------
----- ----------- - ----
-
-------- -
--
-----
-------
-
-
--
-------- ------------- -
----- - -------- ------ ---- - - ----------------------
-- --------- ------ ------------------
-- ------- ------ --------------
------ -
------ --------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ --------------
------ -
----
--------------------- --- ------ ------- -- -- -
--- ---------
----------------
----------------
-----
---
-----
--
--
--------
--
-
------ ------- ------------上述代码使用了两种方式，一种是 useQuery 方法，用于直接从 GraphQL 服务器获取数据；另一种是 Query 组件，用于记载数据获取的状态，包括 loading、error、data 等。
Mutation 组件
Mutation 组件可以很方便地与 GraphQL 服务器交互。接下来是一段使用 Mutation 组件进行文章发布的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --- - ---- -----------------
------ - -------- - ---- ---------------------------
----- ----------- - ----
-------- ------------------ ----------------- -
----------------- ------- -
--
-----
-------
-
-
--
-------- ----------------- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- ------------ - ---- -- - -------------------------
----- ------------ - --- -- -
-------------------
------------
---------- -
------ - ------ ------- --
--
---
-------------
---------------
--
------ -
--------- -----------------------
------------- - ---- -- -- -
----- ------------------------
-----
---------------------
------
-----------
-------------
------------- -- -------------------------
--
------
-----
-----------------------
---------
---------------
------------- -- ---------------------------
--
------
------- ----------------- ----------------
-------
--
-----------
--
-
------ ------- -----------上述代码中，我们通过 useMutation 方法来使用 Mutation 组件，这不仅可以方便地提交数据，还可以得到成功或者失败的提示。
结语
本篇文章介绍了如何安装和使用 @apollo/react-components，以及 Query 组件和 Mutation 组件的使用方法。希望对大家有所帮助。同时，也要注意，所有的工具只是提高效率的手段，我们最终的目的是实现我们的业务逻辑，应该选择适合的工具，而不是一味地追求新工具或者新技术，本着用合适的工具解决问题的原则，才是我们前端开发人员的本分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc279b5cbfe1ea0612082