简介
npm 是 Node.js 的包管理器，用于管理和分享 JavaScript 代码。lokka-hoc 是一个基于 graphql 的高阶组件 (HOC)，通过将 GraphQL 变量注入到组件中，提供了一种简单的处理数据的方式，使得前端代码更加简洁和易于维护。
安装
首先，你需要安装 npm，命令如下：
npm -g install npm
然后，你可以通过以下命令安装 lokka-hoc：
npm install lokka-hoc
使用
在使用 lokka-hoc 之前，你需要了解 graphql 查询语言的基本语法和规范，以及如何通过 graphql 构建一个服务端 api。
假设你已经有了一个 graphql api http://localhost:8080/graphql，现在你需要在你的前端应用程序中使用它，你可以使用 lokka 核心库来创建一个 graphql 客户端，如下所示：
import Lokka from 'lokka';
import HttpTransport from 'lokka-transport-http';
const client = new Lokka({
transport: new HttpTransport('https://localhost:8080/graphql')
});然后，你可以使用 lokka-hoc 来将 graphql 变量注入到你的组件中，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ------------
-------- ------------- ---- -- -
-- -------------- ------ ----------------------
------ ----------------------------
-
----- ---------- - -
---------- ---- -
-------- ---- -
----
-
-
--
------ ------- -------------------------------在上面的例子中，我们首先定义了一个名为 MyComponent 的 React 组件，并将 graphql 变量作为 data 属性注入到组件中，然后使用组件中的 data.user.name 属性呈现 graphql 数据。
为了获取数据，我们必须传递一个名为 USER_QUERY 的 graphql 查询和一个变量对象，包含了我们查询操作所需的变量。我们可以通过 lokka hoc 对 USER_QUERY 进行包装，以将 graphql 数据注入到我们的组件中。
-- -------------------- ---- -------
----- ---------- - -
---------- ---- -
-------- ---- -
----
-
-
--
------ ------- -------------------------------在注入 graphql 数据之前，需要将 USER_QUERY 包装成为一个 HOC，以便在我们的组件中接受 graphql 数据。
在上面的例子中，我们使用了命名函数 lokka，它将 USER_QUERY 作为第一个参数，返回一个高阶组件，可以将 MyComponent 注入 graphql 数据并以 data 属性的形式传递下来。
总结一下，使用 lokka-hoc 有以下几个步骤：
- 安装 npm 包 lokka-hoc
- 创建一个 lokka 客户端来访问 graphql api
- 在组件中使用 lokka-hoc 包装你的 graphql 查询
- 将注入的 graphql 数据呈现在你的组件中
示例代码
计数器应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ------------
-------- --------- ----- -------------- ------------- -- -
------ -
-----
------- ----------------------------------
-------------------------
------- ----------------------------------
------
--
-
----- ------------- - -
----- -
-----
-
--
----- ---------------- - -
-------------------- ----- -
---------------------- ----------- -
-----
-
-
--
------ ------- -------------------- - ---------- - -------------- ----------------- -------------- ----------------- ---------- - ---------- - - - ------------在上面的例子中，我们首先定义了一个名为 Counter 的计数器组件，并包装了一个名为 COUNTER_QUERY 的 graphql 查询，用于获取当前计数器值。我们还定义了两个计数器变量增加和减少的 graphql 变量和对应的 COUNTER_MUTATION。
最后，我们使用 lokka hoc 呈现了 Counter 组件，并将 COUNTER_QUERY 和 mutations 传递给 lokka。
总结
在本教程中，我们介绍了 npm 包 lokka-hoc 的使用方法，它提供了一种简单但功能强大的方法，在前端应用程序中使用 graphql 数据。
我们学习了如何使用 lokka-hoc，以及如何将 graphql 变量注入到我们的组件中，以呈现我们的数据。我们还演示了一个计数器应用程序，其中包含了 lokka 查询和 mutations 的例子。
希望本教程能够帮助你更好地了解如何使用 npm 包 lokka-hoc，提高前端开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596381e8991b448d6dd8