随着现代 Web 应用程序对实时数据更新的需求不断增加，RESTful API 已经无法满足这种需求。GraphQL 因其灵活性和可扩展性而成为前端开发者构建实时数据 API 的首选方案。本文将介绍 GraphQL 的基础概念和使用方法，并提供示例代码。
什么是 GraphQL？
GraphQL 是一种用于 API 开发的查询语言和运行时系统，它由 Facebook 开发并于 2015 年首次公开亮相。相对于传统的 RESTful API，GraphQL 允许客户端通过单个请求获取精确的数据，从而避免了过度或不足的数据传送问题。
GraphQL 构建在三个核心概念之上：
- Schema（模式）：定义了 API 所支持的数据类型、查询类型和连通性。
- Query（查询）：客户端发送的请求，其中规定了需要返回的数据。
- Resolver（解析器）：指定 GraphQL 在查询时如何获取和组合数据。
如何使用 GraphQL？
步骤 1：定义您的数据 Schema
GraphQL 的每个 API 都有一个明确的、自我完备的 Schema，因此第一步是为您的 API 定义 Schema。在 Schema 中，您将指定数据类型和查询类型。类型是指您数据的结构和约束，如字符串、数字和日期，而查询则是指查询数据和定义如何返回数据。以下是一个简单的 Schema 定义：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------ ------ ------ ------ ------ - ---- ---- - --- --- ------ ------ ------------ ------ ------- ---- - ---- ----- - ------ ------ -------- ----- ---- ------ ------ -------- ----- ---- -
在这个例子中，我们定义了两个类型 User 和 Post，每个类型都有一组指定名称和类型的字段。我们还定义了一个 Query 类型，客户端可以使用这种类型查询用户和帖子。
步骤 2：连接数据
GraphQL 是一种灵活的 API 解决方案，可以与几乎任何数据源连接。在 GraphQL 中，您可以为每个类型和查询指定一个解析器函数来获取和返回数据。以下是一个示例解析器的定义：
-- -------------------- ---- -------
----- --------- - -
------ -
------ -- -- -----------
----- -------- ----- -- ---------------------- -- ------- --- ---------
------ -- -- -----------
----- -------- ----- -- ---------------------- -- ------- --- ---------
--
----- -
------ -------- --
------------------------ -- ------------- --- -----------
--
----- -
------- -------- --
---------------------- -- ------- --- -----------------
--
--这里，我们使用一个简单的数据源来模拟用户和帖子数据。在用户请求数据时，解析器会向数据源请求数据，在这里我们使用的是内存中存储的硬编码数据。
步骤 3：构建 GraphQL API
一旦我们定义了 Schema 和解析器，我们就可以使用 graphql-yoga 这样的 GraphQL 服务器来构建 API。以下是使用 graphql-yoga 构建基本 API 的示例：
const { GraphQLServer } = require('graphql-yoga');
const server = new GraphQLServer({
typeDefs: './schema.graphql',
resolvers,
});
server.start(() => console.log('Server is running on http://localhost:4000'));此代码在本地 4000 端口启动了一个 GraphQL API。
步骤 4：查询数据
现在，我们已经构建了一个 GraphQL API，并且定义了用于获取数据的 Schema 和解析器，我们可以在客户端应用程序中查询数据了。以下是一个使用 React Hooks 查询所有用户的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -----------------
------ --- ---- --------------
----- --------- - ----
-
----- -
--
----
-----
-
-
--
-------- ---------- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
---------------------- -- -
--- --------------
----------- --------------
-----
---
-----
--
-
------ ------- ---------在上述示例中，我们定义了 GraphQL 查询，使用 useQuery 钩子从 API 中获取数据并将其渲染为用户列表。
步骤 5：实时更新
GraphQL 机制使得在客户端与后端服务器之间进行实时通讯变得更容易。我们可以使用 subscriptions-transport-ws 这样的 WebSocket 实现，通过创建订阅查询来进行实时更新。以下是创建一个订阅的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- -----------------
------ --- ---- --------------
----- --------- - ----
------------ -
------- -
--
-----
-----------
------ -
----
-
-
-
--
-------- ---------- -
----- - ----- ------- - - ---------------------------
-- --------- ------ ------------------
------ -
----
------------------------ -- -
--- --------------
------------ -- ------------------
-----
---
-----
--
-
------ ------- ---------在上述示例中，我们使用 useSubscription 钩子创建一个可以订阅 newPost 的查询，以便在有新帖子时更新客户端应用程序。
总结
GraphQL 可以帮助我们构建出更精简、高效和可扩展的 API，使得我们的应用程序更具有实时性。本文介绍了使用 GraphQL 构建实时数据 API 的基础知识和步骤，包括定义 Schema、连接数据、构建 API 和实时更新等方面。希望本文能够对读者有所启示，并提供有用的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b7bd948841e9894843dbb