使用 JavaScript 实现 GraphQL 订阅以实现实时数据更新
在当今快节奏的世界中，实时数据更新对于现代 Web 应用程序变得越来越重要。实现实时功能的一种流行解决方案是 GraphQL 订阅。在本文中，我们将探讨如何在 JavaScript 中实现 GraphQL 订阅，并提供代码示例、解释和对该主题的全面理解。
了解 GraphQL 订阅
GraphQL 是一种用于 API 的开源查询语言，也是使用现有数据执行这些查询的运行时。它允许客户端从服务器请求特定数据，从而实现客户端和服务器之间高效灵活的通信。虽然 GraphQL 查询和变异用于检索和操作数据，但 GraphQL 订阅通过在客户端和服务器之间建立持久连接来实现实时数据更新。
设置环境
首先，我们需要一个 JavaScript 环境和一个 GraphQL 服务器。就本文而言，我们将使用 Node.js 和 Apollo Server 库，这是用 JavaScript 构建 GraphQL 服务器的流行选择。确保在继续操作之前已安装 Node.js。
安装依赖项
让我们创建一个新项目并安装必要的依赖项 −
mkdir graphql-subscriptions cd graphql-subscriptions npm init -y npm install apollo-server graphql
说明
在此步骤中，我们设置项目目录并使用 npm 初始化新项目。然后，我们安装所需的依赖项，包括 Apollo Server 和 GraphQL 库。
定义模式
接下来，让我们创建一个名为 schema.js 的文件并定义一个简单的 GraphQL 模式 −
// schema.js
const { gql } = require('apollo-server');
const typeDefs = gql`
type Post {
id: ID!
title: String!
content: String!
}
type Query {
posts: [Post!]!
}
type Mutation {
createPost(title: String!, content: String!): Post!
}
type Subscription {
newPost: Post!
}
`;
module.exports = typeDefs;
解释
在此代码片段中，我们从 Apollo Server 导入必要的依赖项，并使用 gql 标记定义我们的 GraphQL 模式。我们定义一个带有 id、title 和 content 字段的 Post 类型。此外，我们定义一个用于检索帖子的 Query 类型、一个用于创建帖子的 Mutation 类型和一个用于接收新帖子实时更新的 Subscription 类型。
实现 GraphQL 订阅
有了模式，现在让我们为 Query、Mutation 和 Subscription 类型实现解析器函数。
在此示例中，我们将使用内存数组来存储帖子。
创建解析器
在名为 resolvers.js 的新文件中，添加以下代码 -
// resolvers.js
const posts = [];
const resolvers = {
Query: {
posts: () => posts,
},
Mutation: {
createPost: (_, { title, content }) => {
const newPost = { id: posts.length + 1, title, content };
posts.push(newPost);
return newPost;
},
},
Subscription: {
newPost: {
subscribe: (_, __, { pubsub }) => pubsub.asyncIterator('NEW_POST'),
},
},
};
module.exports = resolvers;
解释
在此代码片段中，我们为不同的 GraphQL 类型定义了解析器函数。posts 字段的查询解析器返回 posts 数组。createPost 的 Mutation 解析器将新帖子添加到 posts 数组并返回新创建的帖子。最后，newPost 的订阅解析器设置订阅并使用 pubsub 对象异步监听新帖子。
配置服务器
现在，让我们在名为 server.js 的新文件中配置 Apollo 服务器 −
// server.js
const { ApolloServer, PubSub } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');
const pubsub = new PubSub();
const server = new ApolloServer({
typeDefs,
resolvers,
context: () => ({ pubsub }),
});
server.listen().then(({ url }) => {
console.log(`Server ready at ${url}`);
});
解释
在此代码片段中，我们从 Apollo Server 导入必要的依赖项以及我们之前创建的架构和解析器文件。我们从 Apollo Server 实例化一个 PubSub 对象来处理订阅所需的发布-订阅功能。然后，我们使用包含 pubsub 对象的架构、解析器和上下文配置 Apollo Server。最后，我们启动服务器并记录其运行的 URL。
测试 GraphQL 订阅
订阅新帖子 −
在服务器运行时，打开一个新终端并使用 GraphiQL 或 Apollo Client 等 GraphQL 客户端执行以下订阅查询:
subscription {
newPost {
id
title
content
}
}
解释
此订阅查询设置订阅以监听新帖子。它请求新帖子的 id、title 和 content 字段。
发布新帖子
现在，在另一个终端中，执行以下变更以发布新帖子 −
示例
mutation {
createPost(title: "Hello, World!", content: "This is my first post.")
{
id
title
content
}
}
解释
此突变创建了一篇新帖子，标题为"Hello, World!"，内容为"这是我的第一篇帖子"。突变返回新创建帖子的 id、title 和 content 字段。
输出
执行突变后，您应该会看到新创建的帖子被发送到订阅选项卡。订阅选项卡中的输出将如下所示 -
{
"data": {
"newPost": {
"id": "1",
"title": "Hello, World!",
"content": "This is my first post."
}
}
}
结论
在本文中，我们探讨了如何在 JavaScript 中实现 GraphQL 订阅。我们讨论了实时数据更新的重要性，使用 Apollo Server 设置了 GraphQL 服务器，并演示了如何定义架构、解析器和订阅。通过遵循提供的步骤，您可以将 GraphQL 订阅集成到 JavaScript 应用程序中并启用实时功能以改善用户体验。
