前言：
对于前端开发者来说，调用 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。在命令行终端中输入以下命令可以安装依赖库：
npm install -S lokka-transport-http
创建 GraphQL 客户端
在使用 lokka-transport-http 之前，需要先建立 GraphQL API 客户端。可以通过以下代码创建一个简单的 GraphQL 客户端：
import { createClient } from 'lokka'; import { Transport } from 'lokka-transport-http'; const client = new createClient(new Transport('http://your.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
