前言：
对于前端开发者来说，调用 GraphQL API 通常需要使用库。而 lokka-transport-http 则是 GraphQL API 的 JavaScript 框架。这个 npm 包可以把 GraphQL API 集成入任何现有的客户端，例如 React 或 Angular。lokka-transport-http 使用 GraphQL 语言，并提供许多实际应用的功能和优化，这使得它成为一个不可或缺的客户端 API。
本篇教程将为初学者介绍如何使用 lokka-transport-http 来集成 GraphQL API，并提供大量实际的示例代码。
安装 lokka-transport-http
可以使用 npm 包管理器来安装 lokka-transport-http。在命令行终端中输入以下命令可以安装依赖库：
--- ------- -- --------------------
创建 GraphQL 客户端
在使用 lokka-transport-http 之前，需要先建立 GraphQL API 客户端。可以通过以下代码创建一个简单的 GraphQL 客户端：
------ - ------------ - ---- -------- ------ - --------- - ---- ----------------------- ----- ------ - --- ---------------- --------------------------------------
在上面的代码中，导入 createClient 和 Transport，然后使用它们来创建一个 lokka 客户端实例。需要确保替换 API URL 为实际的 GraphQL 服务器 URL。
创建查询请求
创建查询请求相对简单。只需要使用已经创建好的 lokka 客户端实例来调用请求即可。例如：
---------------
-------- -
--
-----
----
-
-------------- -- -
-------------------
-------------- -- -
------------------- -----------
---上面的代码使用 Lokka 客户端查询了一个包含所有文章的查询语句，并在 Promise 中返回了结果。需要注意的是，使用这种方式传递查询将会把查询字符串作为参数，而不是一个对象。
创建修改请求
lokka-transport-http 还可以用来发送 GraphQL API 的修改请求。创建方式和查询请求基本相似，如下所示：
----------------
------------------- ------ ------------ -
------ -
--
----
-
-
--------------- -- -
--------------------
-------------- -- -
------------------- -----------
---在上面的代码中，使用 Lokka 客户端实例调用 mutate 方法来写入数据记录。
使用变量
当需要向后端发送一个动态的查询时，可以使用变量。例如，在一个包含输入对象的查询中，通过变量来存储输入对象。
----- ----- - ------ -------------- ------- -
-------- --------- -
----
-----
-
---
----- --------- - - -------- --- --
------------------- -------------------- -- -
------------------
-------------- -- -
------------------- -----------
---在上面的代码中，使用 $user_id 这个参数来定义了一个变量，并在程序运行时传递进入。使用变量的好处是：可以在同一个查询中使用相同的查询模板和不同的参数值。
使用 Fragment
使用 Fragment 功能，可以封装多个 GraphQL 查询请求，并以重用的形式在其他查询中引用。这个功能可以让代码更容易阅读和维护。以下是一个使用 Fragment 的示例代码:
----- ------------------- - -
-------- ------------------- -- ---- -
--
----
-----------
-
--
----- ----- - -
----- ------------------------ ---- -
-------- ---- -
----------------------
-------- -
----
---- -
----
-
-
-
-
----------------------
--
----- --------- - - --- ---------- --
------------------- -------------------- -- -
------------------
-------------- -- -
--------------------- -- -----------
---在上面的代码中，提取了一部分查询语句，并用 Fragment 实现了重用。最后通过传递变量和查询语句来运行查询。
总结
lokka-transport-http 是一个非常强大的 npm 包，可以很容易地将 GraphQL API 集成到任何现有的客户端中。本篇教程提供了从安装到创建查询请求的全面教程，还介绍了变量和 Fragment 功能。这些知识可以帮助你更好地集成 API，提高开发效率，减少代码设置中的错误。
希望本篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79394