JavaScript 实现GraphQL Subscriptions以进行实时数据更新

在今天快节奏的世界中，实时数据更新对现代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

接下来，让我们创建一个名为schema.js的文件，并定义一个简单的GraphQL schema −

// 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字段的Query解析器返回posts数组。createPost的Mutation解析器向posts数组添加一个新的post，并返回新创建的post。最后，newPost的Subscription解析器设置一个订阅，并使用pubsub对象异步地监听新的posts。

配置服务器

现在，让我们在一个名为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、标题和内容字段。

发布新帖子

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

示例

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

说明

此突变将创建一个标题为“Hello, World!”和内容为“这是我的第一篇文章”的帖子。突变返回新创建帖子的id、标题和内容字段。

输出

执行此突变后，您应该看到新创建的帖子被发送到订阅选项卡。订阅选项卡中的输出将类似于以下内容 –

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

结论

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