在现代 Web 开发中，许多应用程序都需要从服务器获取数据。这些数据通常以 JSON 格式返回。Graphql 在开发中也被广泛使用，因为其非常灵活，可扩展和提供了很多便利性质。如果你正在使用 Graphql，那么 graph-fetch 将是一个优秀的工具来获取和管理数据请求和响应。
什么是 graph-fetch？
graph-fetch 是一个 npm 包，它提供了一种处理 Graphql 请求和响应的方式。它基于 Fetch API，使其易于使用，同时也提供了许多其他功能，如取消请求和使用自定义的头部等。
安装 graph-fetch
你可以通过以下命令来安装 graph-fetch：
npm install graph-fetch
如何使用 graph-fetch
发送 Graphql 请求
在发送 Graphql 请求之前，我们需要明确 Graphql 服务的地址和查询语句。在下面的示例中，我们将使用 Graphql 官方星球大战 API。
在网络请求中，我们需要发送一些头部信息。因此，我们还需要一个包 node-fetch。你可以使用以下命令来安装它：
npm install node-fetch
在你的代码中，你需要导入 graph-fetch 模块和 node-fetch 模块：
const fetch = require('node-fetch');
const { createHttpLink } = require('apollo-link-http');
const { execute, makePromise } = require('apollo-link');
const { graphql } = require('graphql');创建 graphql 客户端:
const httpLink = createHttpLink({ uri: 'https://swapi-graphql.netlify.app/.netlify/functions/index' });
const link = httpLink;
const operation = {
query: '{ allPeople { people { name } } }'
};使用 execute 函数来发送请求:
makePromise(execute(link, operation)) .then(data => console.log(data)) .catch(error => console.error(error));
当然，我们也可以使用 async/await 语法：
async function fetchSwapi() {
const data = await makePromise(execute(link, operation));
console.log(data);
}
fetchSwapi();取消 Graphql 请求
在发送 Graphql 请求到服务器之后，如果该请求已经不再需要，你可以通过中止该请求来取消它。graph-fetch 提供了 AbortController API 来实现该功能。在下面的示例中，我们将使用 React Hooks 来实现该功能：
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ - -------- ----------- - ---- --------------
------ - -------------- - ---- -------------------
------ - ------- - ---- ----------
------ - ----------- - ---- ------------------------
------ - --------------- - ---- -------------------
------ - -------------- - ---- ------------------------
--------- ----------------------- -
----- -------- ----
-
--------- ------------------- - - ------------------------ -
------ --
-------- --------
------- ------
------ ------------ -- -- -----
-
------ -------- ------------- - - -------------------------
--------- -------
------ -------
-- ------------------- -- -
----- ------ -------- - --------------
----- --------- ----------- - -------------------------
----- ------- --------- - ------------------
----- ------------ -------------- - ----------------------------
----- -------- - ---------------- ---- -------- ---
----- ----- - ----- ------- -- -- -
-- ------------ -
-------------------
-
----- ------------- - --- ------------------
-----------------------------
----- --------- - -
------
---------- -----
--
-----------------
--------------------
--- -
----- ------- - ----- -- -- -
----- ------ - ----- --------------------------------------------- ---------- - ------- -------------------- ----
------ -------------
--
------------- -----------
------------------
- ----- ----- -
-- --------- --- ------------- -
--------------
-
------------------
-
--
------------ -- -
------ -- -- -
-- ------------ -
-------------------
-
--
-- ----
------ -
-----
------
--------
------
--
-在 useGraphql Hook 中，我们创建了用于取消的 controller 和包含 Graphql 请求逻辑的 fetch 方法。该 Hook 会返回 data、loading、error 和 fetch 四个变量。使用者可以从 fetch 方法中获取新的数据。
结语
使用 graph-fetch，你可以更容易地处理和管理 Graphql 请求和响应。它提供了许多便利的功能，如取消请求和自定义头部信息等。我们已经使用示例代码对其进行了说明，你可以拿来使用并进行修改。
在开发 Graphql 和 React 应用程序时，graph-fetch 将是非常有用的工具。希望这篇文章能对你有所帮助，谢谢收看~
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8681e8991b448d920e