npm 包 lokka 使用教程

阅读时长 5 分钟读完

介绍

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 类型,该类型具有 idtitlecontentcreatedAtupdatedAt 字段。它还定义了 QueryMutation 类型。Query 类型包含一个名为 allPosts 的查询,它将返回所有的 Post 类型。Mutation 类型中定义了 createPost 突变,用于创建新的 Post 对象。

接下来,通过以下命令部署您的 Schema 到 graphcool 服务器:

使用 Lokka 客户端

创建一个客户端

要使用 lokka 客户端,您需要先创建一个客户端实例。首先,导入 Lokka

接下来,初始化客户端:

请注意,客户端需要知道您的 GraphQL 服务器的 URL。此 URL 取决于您的 graphcool 项目的名称。将上述 URL 中的 <PROJECT-ID> 替换为您自己项目的 ID。

查询

一旦创建了客户端实例,就可以通过查询来获取数据。以下是使用 lokka 客户端执行带有变量的查询的示例:

-- -------------------- ---- -------
----- ----- - -
  ----- -------- -
    -------- -
      --
      -----
      -------
    -
  -
--

----- --------- - ---

------------------- ---------------------- -- -
  -----------------------------
---

这是一个简单的查询,检索了所有 Post 对象的 idtitlecontent 字段。您可以在 query 变量中定义其他查询。

突变

要使用 lokka 客户端进行突变,必须为突变创建一个客户端实例。以下是使用 lokka 客户端执行突变的示例:

-- -------------------- ---- -------
----- -------- - -
  -------- ------------------ -------- --------- -------- -
    ----------------- ------- -------- --------- -
      --
      -----
      -------
    -
  -
--

----- --------- - -
  ------ --- ---- -------
  -------- --- ---- --------
--

----------------------- ---------------------- -- -
  -------------------------------
---

订阅

lokka 客户端也可以用于订阅 GraphQL 数据。以下是实现订阅的简单示例:

-- -------------------- ---- -------
----- ------------ - -
  ------------ -
    ------------ -
      ------------ ---------
    -- -
      ---- -
        --
        -----
        -------
      -
    -
  -
--

----- --------- - ---

------------------------------- --------------------------- -- -
  ------------------------------
---

这里我们定义了一个订阅,该订阅将会在 Post 对象被创建时发生。我们在订阅中指定了这个过滤条件。您可以在订阅中定义其他过滤条件。

结论

在本文中,我们已经介绍了如何使用 lokka 客户端在前端中进行 GraphQL 查询和突变。我们还介绍了如何使用 graphcool 作为我们的 GraphQL 服务器。希望这篇文章对您有用,您已经可以开始构建您自己的前端应用程序了!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb246b5cbfe1ea061114c

纠错
反馈