前言
GraphQL 是一种面向数据的新一代 API，它可以更方便地让前端工程师从服务端获得数据，GraphQL-react 是一个方便的 React 组件集，它提供了一组用于自动生成和更新 GraphQL 数据的挂钩，本文将介绍如何使用 npm 包 graphql-react。
安装
在命令行中运行以下命令进行安装：
npm install graphql-react
使用
开始
首先要导入 ApolloProvider 和 createApolloClient 并将 ApolloProvider 包装到你的 React 组件外层。以 App 组件为例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- - ---- ---------------
------ - ------------------ - ---- ---------------
----- ------------ - --------------------
-- ---- ---- --------- ---- ---- -- ----- --- ----------------
----- --- ------- --------------- -
-------- -
------ -
--------------- ----------------------
--------- --- ------- ----------
-----------------
-
-
-这里使用 createApolloClient 方法提供 Apollo-Client 的配置，使得 GraphQL-react 可以获取系统上下文，进而方便地与 GraphQL 服务器交互。
注意事项
在使用 graphql-react 时，需要注意以下几点：
- query 或 mutation 必须包含 name，delete 或 update 方法；
- 如果查询和变异中包含对同一对象和同一字段的冲突，请使用创意命名方法更改名称；
- 使用短命名来标识每个查询或变异，在将它们重组在一起时可以避免纠缠在一起的查询。
查询
GraphQL-react 支持查询数据之间的关系，查询语句可以从服务器获取一组数据。我们来看一个简单的查询例子，假设我们想从服务器上获取用户信息，我们使用以下语句：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- ------- - ---- ---------------
----- --- ------- --------------- -
-------- -
----- - ---- - - ----------
------ -
-----
----- -- ---------- ----------- --------
---------------------- -- -
--------------------
------------------
------
-
-
-
------ ------- ------------ -
----- ----------------- -------- -
-------- -------- -
-----
------- - ---- -
-
-
-- -
------------- -
-- -------- ------- -----
------- ---
--
-------- ----- -- --
---------- - ------- ------------- --- ---- -
--
--我们使用 graphql 函数装饰器将查询与我们的组件链接起来。这是一个高阶组件，它提供用户信息和一个由 Apollo-Client 自动生成的函数。
变异
GraphQL-react 也支持使用变异从客户端向服务器更改数据。与查询一样，必须指定名称、delete 或 update 方法。我们使用以下语句插入一个新的任务：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- ------- - ---- ---------------
----- ------- ------- --------------- -
-------- -
------ -
-----
---------- ----------- ------- - ----- - -- -- -----------------
------------ -----
--- --
--------- -------------------------- -- --- --
---------------------- -- -
--------------------
------------------
------
-
-
-
------ ------- ---------------- -
----- ----------- -
-------- -
----------
-
-
-------- ------------------------ -------- -
---------------- - ------------ ------------ -- -
------ - ---------- -
------ - ----- ------- -
-
-
-------- ------- -- ---- -
--
-----------
---------
-
-- -
-------- ----- -- --
---- -----
------------------- ---
---
------ -- --------- ------ -- -- --
------------
----------- ----- -- -------- -------- ---
---
--需要注意的是，变异（以及查询）不仅仅是 graphql-react 与 Apollo-Client 的交互方式。在变异之前可以调用代码，并将该代码作为 pre-mutation 参数传递。同样，变异数组可以与其他函数调用链接。
错误处理
GraphQL-react 确保重新渲染查询或变异之后显示由服务器或客户端抛出的错误。这可以通过添加一个处理错误回调函数，通常是一个错误提示组件来实现，如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --- - ---- --------------
------ - ------- - ---- ----------------
----- ---------- - ----
----- ------------------ ---- -
----------- ---- - ------ -
-
--
----- ------ - ---------- ----- - ------- -- ------------------- ------ -- -- -
---------------------- ------ ----------- -----------------
------------ ------ --------------------
------ ----------- ----------------------- ---------
-- ----------- -
-------- -- -------------- ------------ -- -- -
-- --------------- ----------------------------
-- -------------- ---------------------------
-
--
----- --- - -- -- -------- ------ ----
------ ------- ----结束语
在本篇文章中，我们介绍了如何使用 graphql-react，使应用能够更方便地与 GraphQL 服务器交互。GraphQL-react 提供了许多高效的方法和抽象，它可以让你以更少的代码和更少的时间来处理复杂的数据操作，从而使你能够更多地关注应用程序的设计和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/graphql-react