如何使用 GraphQL 和 Hasura 构建实时 Web 应用程序

Web 应用程序的实时性是一项重要的功能，它可以让用户在不刷新页面的情况下获取最新的信息。而实时网站是一种流行的 Web 应用程序类型，它需要能够在不刷新客户端的情况下在任何时候更新内容。GraphQL 和 Hasura 是两个流行的 JavaScript 库，可以实现 Web 应用程序的实时化。

什么是 GraphQL

GraphQL 是一种查询语言，用于 API 查询和数据修改，它由 Facebook 开发并于 2015 年公开发布。它是面向客户端的，独立于服务器的和可组合的，在分布式应用程序中使用。

GraphQL 是一种类似 SQL 的查询语言，它提供了一种统一的方式来定义和查询 API，这使得它成为构建现代 Web 应用程序的理想选择。GraphQL 具有以下特点：

1. 它可以减少数据传输的大小，只有客户端需要的数据才会被返回，这减少了多次查询的带宽和处理时间。
2. 它提供可重用的数据片段，允许开发人员轻松地构建自定义的数据查询。
3. 它通过类型定义创建了严格的数据模型，并允许开发人员对查询进行验证。

什么是 Hasura

Hasura 是一个允许快速构建实时 GraphQL APIs 的服务，它允许开发人员通过与现有数据库连接来自动构建 API。Hasura 提供了一个 UI，以帮助用户配置和管理数据模型并生成 API。

Hasura 的 GraphQL API 具有以下特点：

1. 它支持实时查询和订阅，允许客户端在后端更新时立即接收更改通知。
2. 它使开发人员能够自定义逻辑，这使得它成为构建定制自适应应用程序的理想选择。
3. 它支持各种后端数据源，包括 Postgres 和 MySQL。

构建实时 Web 应用程序

下面是一些步骤，解释如何使用 GraphQL 和 Hasura 构建实时 Web 应用程序。

步骤 1 - 准备工作

1. 安装 Node.js 和 npm

2. 安装 Hasura CLI 和 Postgres：

npm install --global hasura-cli
sudo apt install postgresql postgresql-contrib

1. 运行 hasura 初始化命令：

hasura quickstart graphql-engine

该命令会创建一个新的 Hasura 实例和默认的 Postgres 数据库。

步骤 2 - 创建数据表和数据

1. 连接到已初始化的 hasura 项目：

cd graphql-engine
hasura console

1. 在 Hasura 控制台中，创建一个新的表并添加一些数据。例如，创建一个名为“users”的表，用于存储用户数据。

步骤 3 - 创建 GraphQL API

1. 在 Hasura 控制台中，导航到“Data”选项卡并选择“GraphQL”。

2. 点击“Add Table”按钮，并选择“users”表。 Hasura 将自动生成 GraphQL API。

3. 通过 Hasura 控制台导航到“GraphiQL”选项卡，以查询 GraphQL API。例如，可以查询所有用户数据：

query {
  users {
    id
    name
    email
  }
}

步骤 4 - 添加实时查询

1. 在 Hasura 控制台中，导航到“Remote Schemas”选项卡并选择“Add Remote Schema”。

2. 输入远程 GraphQL API 的 URL。例如，可以使用以下 URL:

https://api.spacex.land/graphql/

1. 通过 Hasura 控制台导航到“GraphiQL”选项卡，以查询远程 GraphQL API。 例如，可以查询 SpaceX 火箭的详细信息：

query {
  rocket(id: "falcon1") {
    name
    active
    wikipedia
  }
}

步骤 5 - 添加实时订阅

1. 在 Hasura 控制台中，导航到“Data”选项卡并选择“GraphQL”。

2. 点击“Add Subscription”按钮，然后选择“users”表。

3. 按以下格式输入订阅查询:

subscription {
  users {
    id
    name
    email
  }
}

1. 在另一个浏览器选项卡或窗口中，将某些数据行插入表中，以触发订阅通知。

2. 在具有订阅的 GraphiQL 窗口中，应收到新数据的更新。

通过使用 GraphQL 和 Hasura，开发人员可以轻松构建实时 Web 应用程序。 此外，Hasura 还提供了一个成熟的管理平台和工具，使开发人员能够更轻松地配置和管理数据模型和 API。

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