GraphQL 是现今流行的一个数据查询语言，它提供了强类型的数据描述语言以及一个强大的查询执行引擎。而 graphql-shortcake 是一个可以快速生成 GraphQL 查询语句的 npm 包，可以大幅度提高前端开发的效率。在本文中，我们将详细介绍如何使用 graphql-shortcake 制作 GraphQL 查询。
安装
我们可以使用 npm 进行安装。在终端执行以下命令即可：
--- ------- -----------------
导入
安装完成后，我们需要导入 graphql-shortcake。在前端项目中，我们一般使用 ES6 的 import 语法来导入 npm 包。在你的项目中执行以下代码：
------ --------- ---- --------------------
使用
定义 Schema
首先，我们需要从后端了解哪些数据可以查询。一般我们会得到一个 GraphQL 的 schema 文档，它定义了数据模型、类型、参数以及查询接口。在本文中，我们使用图书馆的 GraphQL schema 来进行演示。该 schema 包括如下类型：
---- ------ - --- --- ----- ------- ------ -------- - ---- ---- - --- --- ------ ------- -------- ---------- ------- ----------- ----- ------- -------- -------- - ---- ------- - --- --- ----- ------- ------ -------- ---------- ---------- - ---- ------- - ------- ------- ----- ------- -
使用这个 schema，我们可以查询书籍、作者以及图书馆相关的信息。
生成查询
在定义了 schema 后，我们可以使用 graphql-shortcake 快速构建查询语句。graphql-shortcake 提供了非常方便的 API 来帮助我们快速生成 GraphQL 查询语句。
例如，我们想查询所有书名以“GraphQL”为标题的书籍以及它们的作者名和地址。我们可以使用以下代码：
----- ----- - -----------
------ -
------ -----
-------- -
----- -----
------ --
--
-------- -
----- -----
---------- -
------- -----
----- ----
-
-
-
---
-------------------执行上述代码后，我们可以得到查询如下语句：
-
------------ - --------------- --------- -- -
-----
------- -
----
-----
-
------- -
----
--------- -
------
----
-
-
-
-如上所示，我们通过简单的链式调用，可以快速构造出了 GraphQL 查询语句，它包括了我们想要的所有信息。
参数构造
在上述查询语句中，我们可以看到有“where”语句，它是我们输入的参数。在进行查询时，我们需要根据参数来决定查询的结果是什么。/graphql-shortcake 提供了一个非常方便的参数构造器来帮助我们构建 GraphQL 操作所需的参数对象。例如，我们可以生成以下参数对象：
----- --------- - - ------ - --------------- --------- -- --
在本例中，我们生成了一个名为“where”的参数，用于过滤查询结果，只返回标题包含“GraphQL”的书籍。
发送请求
最后一步是执行查询请求并从服务器返回数据。在使用 graphql-shortcake 的过程中，我们可以使用任何现有的 GraphQL 客户端库，如 axios 或者 fetch。例如，使用 axios 我们可以执行以下代码：
---------------------- - ------ --------- ------------------ -- - --------------------------- ---
总结
在本文中，我们了解了如何使用 npm 包 graphql-shortcake 来快速构造 GraphQL 查询语句。我们了解了如何使用 GraphQL schema 和 graphql-shortcake 的 API 来生成查询语句，并使用参数构造器来帮助我们构建参数对象。最后，我们看到了如何使用任何 GraphQL 客户端库来发送查询，并得到服务器的响应数据。希望这篇文章能够让你掌握 graphql-shortcake 的使用方法并在你的项目中提高前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79303