介绍
lokka
是一个轻量级的 GraphQL 客户端,可以用于前端或 Node.js 应用程序。它提供了一种简单但强大的方式来与 GraphQL 服务器进行交互。本文将介绍如何使用 lokka
客户端包在前端中进行 GraphQL 查询和突变。
安装
使用 npm
安装 lokka
:
npm install lokka
由于 lokka
仅是一个客户端,您还需要安装运行 GraphQL 服务器的库和插件以供查询和突变使用。本文将使用 graphcool 作为 GraphQL 服务器。
可以使用以下命令安装 graphcool-cli
:
npm install -g graphcool-cli
创建 GraphQL Schema
在本教程中,我们将使用 graphcool
创建我们的 GraphQL Schema。首先,通过运行以下命令,创建一个新的 graphcool
项目:
graphcool init myproject cd myproject
接下来,通过运行以下命令创建一个简单的 GraphQL Schema:
graphcool add-schema
复制下面的代码并粘贴到创建的 schema.graphql
文件中:
-- -------------------- ---- ------- ---- ---- - --- --- --------- ------ ------- -------- ------- ---------- --------- ---------- --------- - ---- ----- - --------- ------ - ---- -------- - ----------------- -------- -------- --------- ---- -
这个 Schema 定义了 Post
类型,该类型具有 id
,title
,content
,createdAt
和 updatedAt
字段。它还定义了 Query
和 Mutation
类型。Query
类型包含一个名为 allPosts
的查询,它将返回所有的 Post
类型。Mutation
类型中定义了 createPost
突变,用于创建新的 Post
对象。
接下来,通过以下命令部署您的 Schema 到 graphcool
服务器:
graphcool deploy
使用 Lokka 客户端
创建一个客户端
要使用 lokka
客户端,您需要先创建一个客户端实例。首先,导入 Lokka
:
import Lokka from 'lokka'; import Transport from 'lokka-transport-http';
接下来,初始化客户端:
const client = new Lokka({ transport: new Transport('https://api.graph.cool/simple/v1/<PROJECT-ID>') });
请注意,客户端需要知道您的 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