介绍
lokka 是一个轻量级的 GraphQL 客户端，可以用于前端或 Node.js 应用程序。它提供了一种简单但强大的方式来与 GraphQL 服务器进行交互。本文将介绍如何使用 lokka 客户端包在前端中进行 GraphQL 查询和突变。
安装
使用 npm 安装 lokka：
--- ------- -----
由于 lokka 仅是一个客户端，您还需要安装运行 GraphQL 服务器的库和插件以供查询和突变使用。本文将使用 graphcool 作为 GraphQL 服务器。
可以使用以下命令安装 graphcool-cli：
--- ------- -- -------------
创建 GraphQL Schema
在本教程中，我们将使用 graphcool 创建我们的 GraphQL Schema。首先，通过运行以下命令，创建一个新的 graphcool 项目：
--------- ---- --------- -- ---------
接下来，通过运行以下命令创建一个简单的 GraphQL Schema：
--------- ----------
复制下面的代码并粘贴到创建的 schema.graphql 文件中：
---- ---- - --- --- --------- ------ ------- -------- ------- ---------- --------- ---------- --------- - ---- ----- - --------- ------ - ---- -------- - ----------------- -------- -------- --------- ---- -
这个 Schema 定义了 Post 类型，该类型具有 id，title，content，createdAt 和 updatedAt 字段。它还定义了 Query 和 Mutation 类型。Query 类型包含一个名为 allPosts 的查询，它将返回所有的 Post 类型。Mutation 类型中定义了 createPost 突变，用于创建新的 Post 对象。
接下来，通过以下命令部署您的 Schema 到 graphcool 服务器：
--------- ------
使用 Lokka 客户端
创建一个客户端
要使用 lokka 客户端，您需要先创建一个客户端实例。首先，导入 Lokka：
------ ----- ---- -------- ------ --------- ---- -----------------------
接下来，初始化客户端：
----- ------ - --- ------- ---------- --- ---------------------------------------------------------- ---
请注意，客户端需要知道您的 GraphQL 服务器的 URL。此 URL 取决于您的 graphcool 项目的名称。将上述 URL 中的 <PROJECT-ID> 替换为您自己项目的 ID。
查询
一旦创建了客户端实例，就可以通过查询来获取数据。以下是使用 lokka 客户端执行带有变量的查询的示例：
----- ----- - -
----- -------- -
-------- -
--
-----
-------
-
-
--
----- --------- - ---
------------------- ---------------------- -- -
-----------------------------
---这是一个简单的查询，检索了所有 Post 对象的 id，title 和 content 字段。您可以在 query 变量中定义其他查询。
突变
要使用 lokka 客户端进行突变，必须为突变创建一个客户端实例。以下是使用 lokka 客户端执行突变的示例：
----- -------- - -
-------- ------------------ -------- --------- -------- -
----------------- ------- -------- --------- -
--
-----
-------
-
-
--
----- --------- - -
------ --- ---- -------
-------- --- ---- --------
--
----------------------- ---------------------- -- -
-------------------------------
---订阅
lokka 客户端也可以用于订阅 GraphQL 数据。以下是实现订阅的简单示例：
----- ------------ - -
------------ -
------------ -
------------ ---------
-- -
---- -
--
-----
-------
-
-
-
--
----- --------- - ---
------------------------------- --------------------------- -- -
------------------------------
---这里我们定义了一个订阅，该订阅将会在 Post 对象被创建时发生。我们在订阅中指定了这个过滤条件。您可以在订阅中定义其他过滤条件。
结论
在本文中，我们已经介绍了如何使用 lokka 客户端在前端中进行 GraphQL 查询和突变。我们还介绍了如何使用 graphcool 作为我们的 GraphQL 服务器。希望这篇文章对您有用，您已经可以开始构建您自己的前端应用程序了！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb246b5cbfe1ea061114c