在现代的 Web 开发中，前端和后端的数据同步是非常重要的一环。传统的实现方式是使用 RESTful API，但是这种方式存在一些不足，比如需要频繁地发送请求获取数据，容易出现数据不一致的情况等。近年来，GraphQL 和实时数据同步成为了前端开发的热门话题。本文将介绍如何使用 Hasura 和 GraphQL 进行实时数据同步。
什么是 Hasura？
Hasura 是一个开源的 GraphQL 引擎，它可以把数据库中的数据转换成 GraphQL API。使用 Hasura，我们可以快速地创建和管理 GraphQL API，同时还支持实时数据同步和订阅功能。
什么是 GraphQL？
GraphQL 是一种用于 API 的查询语言和类型系统，它可以让客户端精确地获取它需要的数据，避免了 RESTful API 中过度获取数据的问题。GraphQL 还支持实时数据同步和订阅功能，这使得前端可以及时地获取最新的数据，并且可以避免数据不一致的问题。
如何使用 Hasura 和 GraphQL 进行实时数据同步？
下面将介绍如何使用 Hasura 和 GraphQL 进行实时数据同步的步骤。
步骤一：安装 Hasura
首先，我们需要安装 Hasura。可以通过以下命令在本地安装 Hasura：
$ curl -L https://hasura.io/install.sh | bash
安装完成后，我们可以通过以下命令启动 Hasura：
$ hasura quickstart <project-name> --type <template>
其中 <project-name> 是项目的名称，<template> 是使用的模板，可以选择 nodejs-express 或 graphql-engine。这里我们选择 graphql-engine。
步骤二：配置数据库
Hasura 需要连接一个数据库，我们可以使用 PostgreSQL 或者 MySQL。这里我们以 PostgreSQL 为例。
首先，我们需要创建一个 PostgreSQL 数据库，并将其连接到 Hasura。可以通过以下命令创建一个 PostgreSQL 数据库：
$ createdb <database-name>
然后，我们需要将数据库连接到 Hasura。可以通过以下命令打开 Hasura 控制台：
$ hasura console
然后，在控制台中选择 Data，然后选择 Connect Database。在弹出的对话框中输入数据库的连接信息，包括数据库名称、用户名、密码和主机地址。
步骤三：创建数据表和 GraphQL API
现在，我们可以在 Hasura 中创建数据表和 GraphQL API 了。可以通过以下步骤创建一个数据表和相应的 GraphQL API：
- 在控制台中选择
Data，然后选择Create Table。 - 在弹出的对话框中输入数据表的名称和字段。
- 点击
Add Table按钮创建数据表。 - 在控制台中选择
GraphiQL，然后输入以下代码创建相应的 GraphQL API：
-- -------------------- ---- ------- ---- ------------ - ---------- -------- ---------- -------- --- - ---- ----- - ------------- -------------- -
其中 <table-name> 是数据表的名称，<field> 是数据表的字段名，<type> 是数据表的字段类型。这里我们以一个名为 users 的数据表为例：
-- -------------------- ---- ------- ---- ----- - --- ---- ----- ------- ------ ------- - ---- ----- - ------ ------- -
这样，我们就可以通过 GraphQL API 获取和修改 users 数据表中的数据了。
步骤四：启用实时数据同步
Hasura 支持实时数据同步和订阅功能，可以通过以下步骤启用实时数据同步：
- 在控制台中选择
Data，然后选择Track All。 - 在控制台中选择
Actions，然后选择Create Action。 - 在弹出的对话框中输入 Action 的名称和参数。
- 在控制台中选择
Events，然后选择Create Trigger。 - 在弹出的对话框中选择触发器的事件类型和操作类型。
- 在触发器的操作中调用上一步创建的 Action。
这样，当数据表中的数据发生改变时，Hasura 就会实时地将改变的数据发送给客户端。
步骤五：使用 GraphQL 订阅实时数据
现在，我们可以在前端使用 GraphQL 订阅实时数据了。可以通过以下步骤订阅数据：
- 在前端使用 Apollo Client 或者其他 GraphQL 客户端。
- 在客户端中定义一个 GraphQL Subscription，订阅数据表的改变。
subscription {
<table-name> {
<field-1>
<field-2>
...
}
}这里我们以 users 数据表为例：
subscription {
users {
id
name
email
}
}这样，客户端就可以实时地获取 users 数据表中的数据了。
示例代码
下面是一个使用 Hasura 和 GraphQL 进行实时数据同步的示例代码：
-- -------------------- ---- -------
------ - ---- ------------ - ---- -----------------
----- ------ - --- --------------
---- -----------------------------------
-------- -
------------------------ -------------------
--
---
----- ------------ - ----
------------ -
----- -
--
----
-----
-
-
--
------------------ ------ ------------ --------------
----- ------ -- ------------------
------ ------- -- ---------------------
---这里使用 Apollo Client 订阅 users 数据表中的数据，并在控制台中输出订阅到的数据。
结论
使用 Hasura 和 GraphQL 进行实时数据同步是一种高效、可靠的方式，可以大大提高前端和后端的数据同步效率，并且避免了数据不一致的问题。本文介绍了使用 Hasura 和 GraphQL 进行实时数据同步的步骤和示例代码，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67664e6276af2b9a20f5a7bb