随着技术的不断进步，前端开发也越来越复杂，而 RESTful API 已经成为前后端交互的主要方式。但是，在某些场景下，RESTful API 可能会导致数据冗余和查询效率低下等问题。在这种情况下，GraphQL 可以作为替代方案实现前后端交互的需求。
本文将为大家介绍如何在 React 应用中使用 GraphQL 完成 CRUD 操作，并提供示例代码以帮助读者更好地理解。
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的查询语言，可以用于 API 开发。与 RESTful API 不同，GraphQL 允许客户端定义自己需要的数据结构，而不是返回完整的资源列表。GraphQL 还具有强大的类型系统、自描述性和简洁的查询语法等特点。
如何在 React 应用中使用 GraphQL？
要在 React 中使用 GraphQL，我们需要用到以下内容：
- GraphQL 客户端：这是一个用于执行 GraphQL 查询的 JavaScript 库。
- GraphQL 服务器：这是提供 GraphQL API 的服务器。
- React 组件：这是渲染用户界面的 React 组件。
安装 GraphQL 客户端和 React 组件
使用 Apollo Client 这个客户端库来实现 GraphQL 查询和缓存。可以在项目中执行以下命令安装 apollo-boost 和 react-apollo：
npm install apollo-boost react-apollo
安装 GraphQL 服务器
如果您使用 Node.js，可以使用 express-graphql 或 apollo-server-express 来设置 GraphQL 服务器。这里以 apollo-server-express 为例，执行以下命令来安装：
npm install apollo-server-express
配置 GraphQL 服务器
- 新建 app.js
-- -------------------- ---- -------
----- - ------------ - - ---------------------------------
----- ------- - -------------------
----- -------- - --------------------
----- -------- - --------------------
----- --------- - -----------------------
-- ------- ---------- --
--------------------------
----- --- - ----------
----- ---- - ---------------- -- -----
----- ------ - --- -------------- --------- --------- ---
------------------------
---------------------------- --------- ----- ----
------------------------ --- ---
-- -- ------- ---
----------------------------------------- - ---------------- ---- ---
-------------------------------- -- -- -
---------------------- -- -----------
---
---------------- -- -- -
--------------- ------ ----- -- ------------------------------------------------
---- 新建 schema.js
-- -------------------- ---- -------
----- - --- - - ---------------------------------
----- -------- - ----
---- ----- -
------ --------
-------- ----- ----
-
---- -------- -
-------------------- -------- ------ -------- --------- --------- ------
-------------- ---- --------- ------- ------ ------- --------- -------- ------
-------------- ----- -----
-
---- ---- -
--- ----
--------- --------
------ --------
--------- ------
-
--
-------------- - ---------- 新建 resolvers.js
-- -------------------- ---- -------
----- ---- - ------------------------
----- --------- - -
------ -
------ ----- -- -- ----- ------------
----- ----- --- - -- -- -- ----- -----------------
--
--------- -
----------- ----- --- - --------- ------ -------- -- -- ----- ------------- --------- ------ -------- ---
----------- ----- --- - --- --------- ------ -------- -- -- -
----- ---- - ----- ------------------
-- ------- -
----- --- ----------- ---- -- ----- ---- --- ---------
-
-- ---------- -
------------- - ---------
-
-- ------- -
---------- - ------
-
-- ---------- -
------------- - ---------
-
------ ----- ------------
--
----------- ----- --- - -- -- -- -
----- ---- - ----- ---------------------------
-- ------- -
----- --- ----------- ---- -- ----- ---- --- ---------
-
------ -----
-
-
--
-------------- - ----------
调用 API 并渲染 React 组件
现在，我们已经有了一个 Apollo Server，我们可以在客户端调用它。我们需要使用 react-apollo 提供的 ApolloProvider 来将 Apollo Client 与组件相连，并使用 gql 将查询字符串传递给服务器。
以下是完成 CRUD 操作的示例代码。需要先在 server.js 中启动 GraphQL 服务器。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --- ---- --------------
------ - --------- ----------- - ---- ----------------------
------ - -------------- - ---- ---------------
------ - -------------- -- ------------------- - ---- ----------------------
------ ------------ ---- ---------------
------ --------- ---- --------------
----- ------ - --- --------------
---- -------------------------------
---
----- --------- - ----
-
----- -
--
--------
-----
--------
-
-
--
----- ----------- - ----
-------- --------------------- -------- ------- -------- ---------- -------- -
-------------------- ---------- ------ ------- --------- ---------- -
--
--------
-----
--------
-
-
--
----- ----------- - ----
-------- --------------- ---- ---------- ------- ------- ------- ---------- ------- -
-------------- ---- --------- ---------- ------ ------- --------- ---------- -
--
--------
-----
--------
-
-
--
----- ----------- - ----
-------- --------------- ---- -
-------------- ---- -
--
--------
-----
--------
-
-
--
-------- ----- -
----- --------- ----------- - ----------------
----- ------------- --------------- - ---------- --- ----- --------- --- ------ --- --------- -- ---
----- ------------ - ------------------------ -
------------- - ----- - ---------- - -- -
----- - ----- - - ----------------- ------ --------- ---
------------------
------ ----------
----- - ------ -------------------------- -
---
-
---
----- ------------ - ------------------------ -
------------- - ----- - ---------- - -- -
----- - ----- - - ----------------- ------ --------- ---
------------------
------ ----------
----- - ------ -------------- -- ------- --- ------------- - ---------- - ----- -
---
-
---
----- ------------ - ------------------------ -
------------- - ----- - ---------- - -- -
----- - ----- - - ----------------- ------ --------- ---
------------------
------ ----------
----- - ------ ----------------- -- ------- --- -------------- -
---
-
---
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
---- ----------------------
--------- ------- ---- --------
---- ----------------
---- ---------------------
---- -----------------------
------ ------------------------------------
------ ----------- ------------------------ -------------
----------------------------
----------- -- ------------------------------- --------- -------------------
------
---- -----------------------
------ ------------------------------
------ ------------ ------------------------ ----------
-------------------------
----------- -- ------------------------------- ------ -------------------
------
---- -----------------------
------ ------------------------------------
------ --------------- ------------------------ -------------
----------------------------
----------- -- ------------------------------- --------- -------------------
------
------- -------------- ------------ ---------- -- -
-------------------
------------ ---------- ----------- ---
---------------- --- ----- --------- --- ------ --- --------- -- ---
------------------
------- -------------- ------------ ---------- -- -
-------------------
------------ ---------- ----------- ---
------------------
---------------- --- ----- --------- --- ------ --- --------- -- ---
------------------
------- -------------- ----------- ---------- -- -
-------------------
------------ ---------- - --- -------------- - ---
---------------- --- ----- --------- --- ------ --- --------- -- ---
------------------
------
---- ---------------------
---------- ------------------ ------------------------------- -------------------------
------
------
------
--
-
-------- ------- -
------ -
--------------- ----------------
-------------------- ----------------
------
----------------------
-----------------
--
-
------ ------- ------在上面的示例代码中，我们首先定义了客户端和服务器之间的查询和变异，并在顶层组件中使用 useQuery、useMutation 和 ApolloProvider 呈现数据。
由于本文的重点是 GraphQL 而不是 React，所以此处不再详细解释 React 组件，具体请参考示例代码。
总结
GraphQL 是一个优秀的替代 RESTful API 的技术，可以解决一些传统 API 存在的问题。在 React 应用中使用 GraphQL 完成 CRUD 操作，可以提高应用的响应速度和数据的灵活性。通过本文的介绍，希望读者可以掌握 GraphQL 的使用方法，并能够灵活运用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8b4ba5ad90b6d0414785d