GraphQL 是一种用于 API 开发的查询语言，它可以让你在一个请求中获取到你需要的数据。GraphQL-form-handler 是一个可以在前端使用的 NPM 包，它提供了一个易于使用的 API，让你可以向 GraphQL 服务器发送数据提交请求。在这篇文章里，我会向你介绍如何使用这个 NPM 包，以及如何在前端中使用 GraphQL-form-handler。
什么是 GraphQL-form-handler
GraphQL-form-handler 是一个可以在前端中使用的 NPM 包，它使用了 JavaScript，可以方便地向 GraphQL 服务器发送数据提交请求。
GraphQL-form-handler 包含了以下主要功能：
- 通过 GraphQL-form-handler 向 GraphQL 服务器发送数据提交请求。
- 自定义请求头和 Cookies。
安装
要使用 GraphQL-form-handler，你需要先安装它。可以通过以下方式来安装：
npm install graphql-form-handler --save
使用 GraphQL-form-handler
使用 GraphQL-form-handler，你需要生成一个请求函数并发送请求。
生成请求函数
-- -------------------- ---- -------
------ ------------------ ---- -----------------------
----- --- - --- --------------------
---- --------------------------
-------- -
---------------- --------------------
--------------- -------------------
--
------------ --------------
---首先，我们导入 GraphQLFormHandler。我们可以使用 new 函数来创建一个 GraphQLFormHandler 实例。下面是 new 函数中的选项：
url: GraphQL 服务器的 URL。headers: 发送到服务器的请求头。credentials: 如何处理请求的身份验证。
url 和 headers 两个选项是必须的，其他选项则是可选的。
发送请求
构建好了请求函数后，现在我们可以向服务器发送请求：
-- -------------------- ---- -------
----------
------ --------- -------- ----------------- -
----------------- -------
-
--
-----
---------
-
---
---------- -
------ -
------ ---- ------
---------- ------
--
--
--
---------------- -- -
----------------------
---在上面的代码中，我们使用 post 方法来发送一个请求。post 方法接收一个包含以下选项的对象：
query: GraphQL 查询字符串。variables: 按照查询字符串定义的变量。
请求函数返回一个 Promise，在 Promise 被解决时我们将得到一个包含响应的对象。
自定义请求头和 Cookies
如果你需要发送请求头，可以在 GraphQLFormHandler 构造函数中提供 headers 选项。如果你需要发送 Cookies，可以在构造函数中提供 credentials 选项。
-- -------------------- ---- -------
----- --- - --- --------------------
---- --------------------------
-------- -
---------------- --------------------
--------------- -------------------
------------------ ------------------ -- ------
--
------------ -------------- -- ------
---示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ ------------------ ---- -----------------------
----- --- - --- --------------------
---- --------------------------------
-------- -
--------------- -------------------
--
------------ --------------
---
----------
------ ------ -
----- -
--
-----
---------
-
---
--
---------------- -- -
----------------------
---结论
在这篇文章里，我们学习了如何使用 GraphQL-form-handler 包，用于在前端中向 GraphQL 服务器发送数据提交请求。我们了解了如何生成请求函数，如何自定义请求头和 Cookies，以及包含完整的样例代码。祝你玩得开心！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbd81e8991b448da4d6