在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 模式。我们定义了一个 Post 类型，其中包含 id、title 和 content 字段。此外，我们定义了一个 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 字段的 Query 解析器返回 posts 数组。createPost 的 Mutation 解析器将新帖子添加到 posts 数组并返回新创建的帖子。最后，newPost 的 Subscription 解析器设置订阅并使用 pubsub 对象异步监听新帖子。

配置服务器

现在，让我们在一个名为 server.js 的新文件中配置 Apollo Server -

// 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 以及我们之前创建的 schema 和 resolver 文件导入必要的依赖项。我们从 Apollo Server 实例化一个 PubSub 对象来处理订阅所需的发布-订阅功能。然后，我们使用 schema、resolvers 和包含 pubsub 对象的上下文配置 Apollo Server。最后，我们启动服务器并记录其运行的 URL。

测试 GraphQL 订阅

订阅新帖子 -

服务器运行后，打开一个新终端并使用 GraphQL 客户端（如 GraphiQL 或 Apollo Client）执行以下订阅查询

subscription {
   newPost {
      id
      title
      content
   }
}

说明

此订阅查询设置一个订阅以监听新帖子。它请求新帖子的 id、title 和 content 字段。

发布新帖子

现在，在另一个终端中，执行以下突变以发布新帖子 -

示例

mutation {
   createPost(title: "Hello, World!", content: "This is my first post.")
   {
      id
      title
      content
   }
}

说明

此突变创建一个新的帖子，标题为“Hello, World！”，内容为“This is my first post.”。该突变返回新创建帖子的 id、title 和 content 字段。

输出

执行突变后，您应该会看到新创建的帖子被发送到订阅选项卡。订阅选项卡中的输出将如下所示 -

{
   "data": {
      "newPost": {
         "id": "1",
         "title": "Hello, World!",
         "content": "This is my first post."
      }
   }
}

结论

在本文中，我们探讨了如何在 JavaScript 中实现 GraphQL 订阅。我们讨论了实时数据更新的重要性，使用 Apollo Server 设置了 GraphQL 服务器，并演示了如何定义模式、解析器和订阅。通过遵循提供的步骤，您可以将 GraphQL 订阅集成到您的 JavaScript 应用程序中，并为改进的用户体验启用实时功能。