npm 包 graphql-zealot 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

graphql-zealot 是一款基于 Node.js 平台的 GraphQL 客户端库，它能极大地方便我们在前端应用中使用 GraphQL 进行数据查询和管理。graphql-zealot 提供了丰富的功能和方法，例如：请求缓存、查询变量、请求取消等等，它也支持多个 GraphQL 服务端，而且可以像 HTTP 一样使用各种认证方式。

安装

在使用之前，我们需要先安装 graphql-zealot 库。你可以使用 npm 或 yarn 命令进行安装。

npm install graphql-zealot

yarn add graphql-zealot

使用

在我们开始使用 graphql-zealot 之前，首先需要配置一个 GraphQL 客户端。我们需要提供一个 GraphQL 服务端的 URL，然后构建一个客户端：

import Zealot from "graphql-zealot";

const client = new Zealot({
  url: "https://graphql.example.com"
});

发送查询请求

假设我们要查询一篇博客文章的标题和作者的名字，我们可以定义如下查询语句：

query {
  post(id: 1) {
    title
    author {
      name
    }
  }
}

然后我们可以通过 client.query() 方法发送这个查询请求，并处理响应数据：

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

发送变更请求

假设我们要创建一篇新的博客文章，并将其标题设为 "Hello World"，我们可以定义如下变更语句：

mutation {
  createPost(title: "Hello World") {
    id
    title
  }
}

然后我们可以通过 client.mutate() 方法发送这个变更请求，并处理响应数据：

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

发送订阅请求

假设我们想要订阅一篇博客文章的评论更新，我们可以定义如下订阅语句：

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

然后我们可以通过 client.subscribe() 方法发送这个订阅请求，并处理订阅事件：

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

更多功能

除了以上提到的基本使用方法之外，graphql-zealot 还提供了许多高级的功能和方法。这些功能包括：

查询缓存

graphql-zealot 提供了自动的查询缓存功能，它可以缓存已经发送过的查询请求及其响应数据，下次再发送相同的查询请求时，它会直接从缓存中返回响应数据，大大减少了网络请求的数量，提升了应用的性能。你可以通过如下方式开启查询缓存：

const client = new Zealot({
  url: "https://graphql.example.com",
  cache: true
});

查询变量

graphql-zealot 支持查询变量，它可以在查询语句中使用参数，使查询更加动态和灵活。例如，我们可以这样定义一个查询语句：

query($id: ID!) {
  post(id: $id) {
    title
    author {
      name
    }
  }
}

然后我们可以通过 variables 参数传入查询变量：

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

请求取消

graphql-zealot 支持请求取消，它可以在发送请求后主动取消请求，中断网络请求，从而避免网络请求的浪费。例如，我们可以这样定义一个查询请求，并发送请求：

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

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

认证方式

graphql-zealot 支持多种认证方式，例如 HTTP 基本认证、Bearer Token 等等。你可以通过 headers 参数设置认证方式，例如：

const client = new Zealot({
  url: "https://graphql.example.com",
  headers: {
    Authorization: "Bearer xxx"
  }
});

总结

graphql-zealot 是一款非常强大的 GraphQL 客户端库，它提供了丰富的功能和方法，能够极大地方便我们在前端应用中使用 GraphQL 进行数据查询和管理。在使用过程中，你可以根据自己的需求选择合适的功能和方法，从而更加高效地完成开发任务。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60057c9881e8991b448ebf5f