在前端开发中，API 的调用是非常重要的一环。而 @grafoo/transport 这个 npm 包正是一个非常优秀的工具，专注于对 GraphQL API 的调用与管理。本文将介绍如何使用这个包来发起 GraphQL API 的请求。
基本介绍
@grafoo/transport 这个包中封装了一个 grafoo-transport 的类，它的主要作用是管理 GraphQL 请求流。使用这个包可以有效地简化 GraphQL API 的调用流程，提高开发效率。
使用步骤
安装
使用 npm 安装 @grafoo/transport，可以使用以下命令：
npm install @grafoo/transport
创建一个 Transport 实例
在使用 @grafoo/transport 的 api 前，我们需要首先创建一个 Transport 实例。Transport 实例包含一个 fetch 方法，用于向远程 GraphQL API 发起请求。以下是一个创建 Transport 实例的简单示例：
import { createTransport } from '@grafoo/transport';
const transport = createTransport({
url: 'https://your-graphql-api.com', // GraphQL API 地址
});上面的代码中，通过调用 createTransport 方法创建了一个 Transport 实例，并且用它来调用了 GraphQL API。
发送请求
使用 Transport 实例进行 GraphQL API 的请求需要以下步骤：
- 定义查询
- 发送查询请求
- 处理响应数据
定义查询
在使用 @grafoo/transport 发送 GraphQL 请求时，我们需要先定义查询。查询可以使用 GraphQL 的查询语法定义。以下是一个简单的 GraphQL 查询示例：
-- -------------------- ---- -------
----- ----- - -
----- ------------ ---- -
-------- ---- -
--
----
---
-
-
--注意，这里的查询中使用了变量 $id，需要在发送请求时传递 $id 的值。
发送查询请求
发送查询请求需要调用 Transport 的 query 方法，该方法接受两个参数：定义的查询和请求的变量。以下是一个简单的发送 GraphQL 请求的示例：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
----- --------- - -----------------
---- ------------------------------- -- ------- --- --
---
----- ----- - -
----- ------------ ---- -
-------- ---- -
--
----
---
-
-
--
----- --------- - -
--- --
--
-----------------
------
----------
---------------- -- -
----------------------
-------------- -- -
---------------------
---在上面的示例代码中，我们首先创建了一个 Transport 实例，然后定义了一个 GraphQL 查询和查询的变量。接着调用 Transport 实例的 query 方法，将定义的查询和变量当做参数传入，并处理返回的响应数据。
处理响应数据
@grafoo/transport 发送请求之后返回的响应数据包含了 GraphQL API 返回的数据。该数据格式是标准的 GraphQL 响应格式。以下是一个简单的处理响应数据的示例：
-- -------------------- ---- -------
-----------------
------
----------
---------------- -- -
----- - ----- ------ - - ---------
-- -------- -
----------------------
-------
-
------------------
-------------- -- -
---------------------
---在此示例中，我们检查了响应数据中是否包含错误信息，并输出响应数据中的 data 字段。
高级使用
Transport 实例支持传入一些其他配置来定制 GraphQL 请求的行为。下面是一些常用的高级使用示例：
HTTP Headers
可以通过在创建 Transport 实例时传入一个 headers 选项来定制 HTTP 头，以实现向 GraphQL API 发送 auth token 等信息。以下是如何定制 HTTP 头的示例：
const transport = createTransport({
url: 'https://your-graphql-api.com', // GraphQL API 地址
headers: {
Authorization: `Bearer ${authToken}`, // 发送 auth token
...otherHeaders, // 更多 HTTP 头
},
});自定义请求方法
如果需要使用自定义的请求方法，例如使用 axios 发出请求，则可以使用 grafoo-transport-with-headers 依赖包。以下是使用自定义请求方法的示例：
-- -------------------- ---- -------
------ -------------------------- ---- --------------------------------
----- --------- - ----------------------------
---- ------------------------------- -- ------- --- --
-------- -
-------------- ------- -------------- -- -- ---- -----
---------------- -- -- ---- -
--
-------- ----- -------- -- -
------ --------------- ------------- ---------
--
---在这个示例中，我们使用 grafoo-transport-with-headers 包中的方法创建了一个 Transport 实例。使用自定义的请求方法需要传递一个 request 选项，这个选项需要是一个函数，该函数接受请求的 url 和 options 作为参数，并返回一个 Promise 对象，Promise 对象的值应当是包含 GraphQL 响应数据的对象。
Custom Data
如果需要将自定义数据传递给 GraphQL API，可以使用 Transport 实例的 data 选项。以下是一个使用 data 选项的示例：
-- -------------------- ---- -------
----- --------- - -----------------
---- ------------------------------- -- ------- --- --
----- -
----------- --- ------ ------
--
---
----- ----- - -
----- ------------- -
----------
-
--
-----------------
------
---------------- -- -
-------------------------------------- -- -- --- ------ -----
-------------- -- -
---------------------
---在这个示例中，我们使用 Transport 实例的 data 选项把自定义数据传递给了 GraphQL API。GraphQL 查询语句可以直接使用该数据。
总结
@grafoo/transport 是一个非常优秀的工具，可以帮助我们快速、方便地管理和发送 GraphQL 请求。上面介绍的内容只是其中的一部分，如果你想更深入了解这个工具，可以查阅官方文档。希望这篇文章能帮助到你学习和使用 @grafoo/transport，提高你在前端开发上的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f70238a385564ab66be