前言
nanographql 是一个小型的 GraphQL 客户端，它非常快速和易于使用，能够使你更快地开发和测试你的 GraphQL API。在本文中，我们将学习如何使用这个 npm 包来构建一个简单的 React 应用程序，并展示一些其它的使用方式。
安装
nanographql 可作为 npm 包使用。你可以通过 npm 来安装它：
npm install nanographql
或者使用 yarn 来安装：
yarn add nanographql
使用方式
在使用 nanographql 包之前，你需要在服务器端编写一个 GraphQL API。假设你已经编写好了一个 GraphQL API，在客户端中使用 nanographql 的步骤如下：
- 在客户端中导入 GraphQL query 或 mutation。
- 在客户端中调用导入的 query 或 mutation，使用 nanographql 作为参数。
- 处理响应数据。
这可能比较抽象，因此我们将使用一个简单的 React 应用程序来演示这个过程。
示例
假设我们在服务器端编写了一个 GraphQL API 来获取一组数据。以下是一个示例 query：
query GetTodos {
todos {
id
text
completed
}
}这个 query 将返回一个包含 todo 信息的数组。我们将在客户端中使用这个 query，来获取这些 todo，然后在页面上将其显示出来。
首先，我们需要在客户端中安装 nanographql:
npm install nanographql
然后，我们定义一个叫做 getTodosQuery 的 GraphQL query：
-- -------------------- ---- -------
------ --- ---- --------------
----- ------------- - ----
----- -------- -
----- -
--
----
---------
-
-
--
------ ------- --------------现在，我们可以在组件中使用导入的 getTodosQuery。
在这个组件中，我们使用一个叫做 useQuery 的 Hook，这是由 nanographql 提供的。我们还将使用 useState Hook 来存储数据和是否加载数据的状态。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- --------------
------ ------------- ---- --------------------------
-------- ------- -
----- - ----- ----- - - ------------------------
----- --------- ----------- - ---------------
-- --------- -
------ ------------------
-
-- ------- -
------ --------- --------------------
-
----- ----- - -----------
------ -
-----
--------------
----
--------------- -- -
--- --------------
------------------
-----
---
-----
------
--
-
------ ------- ------从上面的代码可以看到，我们首先检查 loading 状态是否为 true。如果是，我们将显示一个加载中的提示。当数据加载完成后，我们将更新 loading 状态为 false，并将 todo 显示在页面上。
如果发生错误，我们将在页面上显示错误信息。
指导意义
通过本文，我们已经学习了如何使用 nanographql 来构建一个简单的 React 应用程序。我们还演示了如何通过导入、调用 query 或 mutation，以及处理响应数据来使用 nanographql 包。
这些概念将帮助你更好地理解 GraphQL 和 nanographql 包，以及如何使用它们来构建快速而稳定的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728981e8991b448e8c05