前言
GraphQL 是一种 API 查询语言和运行时环境，由 Facebook 在 2012 年开发并于 2015 年公开发布。它提供了一种描述 API 的方式，使得客户端能够准确地获取所需的数据。而 @hasnat/graph.ql 就是一款基于 GraphQL 语言实现的 npm 包，它提供了一系列的工具，使得前端开发人员可以便捷地构建和管理 GraphQL API。
本文将为大家介绍如何通过 @hasnat/graph.ql 包搭建 GraphQL API，并提供一些示例代码，帮助读者更容易地理解和使用该包。
安装和配置
你可以通过以下命令在你的项目中安装 @hasnat/graph.ql 包：
--- ------- ----------------
安装成功后，在项目中创建一个 graphql.js 文件，用于存放 GraphQL API 的定义和查询语句。接下来，我们需要对该文件进行配置：
----- - -------- -------------- ------------------ ------------- - - ----------------------------
----- ------ - --- ---------------
------ --- -------------------
----- ----------------
------- -
------ -
----- --------------
--------- -
------ ------- --------
--
--
--
---
---
-------------- - -------在这个文件中，我们首先导入了 graphql、GraphQLSchema、GraphQLObjectType 和 GraphQLString 等所要使用的方法和类。其次，我们定义了一个 schema 对象，该对象包含了查询 hello 的数据结构和查询逻辑。这里我们返回了一个包含字符串 "Hello, world!" 的 Promise 对象，在 /graphql 路径下的请求将会返回该字符串。
注意，为了进行 graphql 的解析，你还需要在你的项目根目录下新建一个 index.html 文件，并添加以下代码：
--------- -----
------
------
----- ----------------
----------------------
------- -------------------------------------------------------------
-------
------
---- ------------------
--------
----- ----- - -- ----- ---
---------
------- --------------------------------
------ ------
---------------- -- -
----- ------ - ----------------------------------
---------------- - ------------------------ ----- ---
---
---------
-------
-------在这个 HTML 文件中，我们引入了 @hasnat/graph.ql 包，并使用其中的 graphql 方法进行查询。注意到这里的 schema 参数是指明了 GraphQL API 的 URL 地址。该地址为你本地开发时在命令行中启动的服务器地址。
示例代码
1. 查询字符串
这是一个简单的 GraphQL API，其查询字符串为 { hello }。其返回数据为：
-
------- -
-------- ------- -------
-
-2. 查询一个对象
我们可以通过 GraphQL API 返回一个对象，如下所示：
----- - -------- ----------- - - ----------------------------
----- ------ - -------------
---- ----- -
------- ------
--
---- ------ -
--- ----
----- ------
---- ---
-------- ------
-
---
----- --------- - -
------- -
--- --
----- ------
---- ---
-------- ---- ------
--
--
---------
------- -------
---------- ----------
------ -
-
------ -
--
----
---
-
-
--
-------------- -- -
---------------------------------- ----- ----
---在该示例中，我们首先定义了一个 Person 对象，该对象有包含 id、name、age 和 address 等多个字段。接着，我们定义一个 person 域，使得查询字符串 { person { id, name, age } } 可以返回我们定义的对象。最后，我们利用 graphql 方法对该对象进行查询。这时，我们会得到如下所示的结果：
-
------- -
--------- -
----- --
------- ------
------ --
-
-
-3. 通过参数查询
有时我们需要通过参数对数据库进行查询，可以使用 GraphQL 提供的参数语法。例如：
----- - -------- ----------- - - ----------------------------
----- ------ - -------------
---- ----- -
---------- ------ ------
--
---- ------ -
--- ----
----- ------
---- ---
-------- ------
-
---
----- --------- - -
------- ---------- -- -- -
------ -----------
--
--
---------
------- -------
---------- ----------
------ -
-
---------- -- -
--
----
---
-
-
--
-------------- -- -
---------------------------------- ----- ----
---在该示例中，我们在 person 域后添加了参数语法 (id: Int!)。这意味着查询字符串需要提供一个 id 参数，才能正常执行查询。为了使得该参数能够正确传递到查询函数中，我们修改了 rootValue 对象中 person 函数的定义。该函数需要接受一个 { id } 对象作为参数，并返回指定的 id 对应的 Person 对象。
在查询时，我们使用 person(id: 1) 的语法提供了查询参数。如果将参数 id 改成其他的数字，我们就能够得到对应 Person 对象的信息。
总结
通过本文的学习，我们已经成功使用了 @hasnat/graph.ql 包构建了一个 GraphQL API，并使用了一系列的示例代码来理解其基础使用方法。希望读者能够更好地掌握 GraphQL 的相关知识，在实际的项目中更好地应用该技术。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ea381e8991b448dbfdf