实时数据更新 —— 使用 GraphQL 订阅-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实时数据更新是一项非常重要的功能。如何在大量数据的场景下进行高效的实时数据更新? 这里我们介绍如何使用 GraphQL 订阅实现实时数据更新。

什么是 GraphQL 订阅

GraphQL 订阅是一种新的 Web 技术，使用它可以实现实时数据更新。它是一种发布/订阅模型的实现。当客户端订阅某个数据时，服务端会自动将数据推送给客户端，当数据发生变化时，客户端会自动收到更新。

GraphQL 订阅的特点

相对于传统的轮询方式，使用 GraphQL 订阅可以带来如下优势:

实时性更好。
网络资源的利用率更高。
对服务器的负载更小。
响应更快。

GraphQL 订阅的使用

定义 SubscriptionType

在 GraphQL 中，我们需要定义 SubscriptionType 来表示订阅的类型。在 SubscriptionType 中，我们定义了客户端可以订阅的数据和相应的字段。

type Subscription {
  updatedTodo: Todo
}

在上面的例子中，我们定义了 updatedTodo 这个 Subscription 类型，它表示当 Todo 数据更新时，我们需要向客户端推送最新的 Todo 数据。

实现 SubscriptionResolver

当客户端订阅 updatedTodo 的数据时，我们需要在服务端实现订阅功能，即通过 SubscriptionResolver 将数据返回给客户端。

在 SubscriptionResolver 中，我们需要使用 pubsub.asyncIterator 方法来创建一个可异步迭代对象，然后在 subscribe() 方法中订阅相关数据的更新事件，最后在 resolve() 方法中返回数据。

// www.javascriptcn.com code example
const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const resolvers = {
  Subscription: {
    updatedTodo: {
      subscribe: () => pubsub.asyncIterator(['TODO_UPDATED']),
      resolve: (payload: any) => payload,
    }
  }
}

上面的例子中，我们创建了一个 PubSub 对象，并将更新事件的类型设置为 TODO_UPDATED。在 subscribe() 方法中，我们订阅了 TODO_UPDATED 事件，并使用 asyncIterator 方法创建一个可异步迭代对象。在 resolve() 方法中，我们返回了最新的 Todo 数据。

发布更新事件

当 Todo 数据发生变化时，我们需要发布一个 TODO_UPDATED 事件，通知所有订阅该事件的客户端进行更新。

const todoUpdatedNotifier = async (updatedTodo: Todo) => {
  try {
    await pubsub.publish('TODO_UPDATED', updatedTodo);
  } catch (err) {
    console.log(err);
  }
};

上面的例子中，我们定义了一个 todoUpdatedNotifier 方法，当 Todo 数据发生变化时，我们通过 publish() 方法将更新事件的类型设置为 TODO_UPDATED，并将最新的 Todo 数据传递给所有订阅该事件的客户端。

示例代码

下面是使用 GraphQL 订阅实现实时数据更新的示例代码:

// www.javascriptcn.com code example
const { ApolloServer, gql } = require('apollo-server');
const { PubSub } = require('graphql-subscriptions');

// 初始化 PubSub 对象
const pubsub = new PubSub();

// 定义 Todo 类型
const typeDefs = gql`
  type Todo {
    id: Int!
    title: String!
    completed: Boolean!
  }

  type Subscription {
    updatedTodo: Todo
  }
`;

// 初始化 Todo 数据
const todos = [
  { id: 1, title: 'Buy milk', completed: false },
  { id: 2, title: 'Go to gym', completed: false },
  { id: 3, title: 'Read book', completed: false }
];

// 定义查询字段
const resolvers = {
  Query: {
    todos: () => todos,
  },
  // 定义 Subscription 类型
  Subscription: {
    updatedTodo: {
      // 订阅更新事件
      subscribe: () => pubsub.asyncIterator(['TODO_UPDATED']),
      // 返回最新的 Todo 数据
      resolve: (payload: any) => payload,
    }
  }
};

// 定义 todoUpdatedNotifier 方法
const todoUpdatedNotifier = async (updatedTodo: Todo) => {
  try {
    await pubsub.publish('TODO_UPDATED', updatedTodo);
  } catch (err) {
    console.log(err);
  }
};

// 定义修改 Todo 数据的方法
const updateTodo = (id: number, data: any) => {
  const index = todos.findIndex(t => t.id === id);
  todos[index] = { ...todos[index], ...data };
  todoUpdatedNotifier(todos[index]);
  return todos[index];
};

// 定义 ApolloServer 实例
const server = new ApolloServer({ typeDefs, resolvers });

// 启动服务器
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

// 修改数据并发布更新事件
setTimeout(() => {
  updateTodo(1, { completed: true });
}, 5000);

结语

使用 GraphQL 订阅实现实时数据更新，可以提高实时性，并减少对服务器的负载，从而提高应用程序的响应速度。在应用中使用 GraphQL 订阅，可以让你的应用更加高效和流畅。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d019cce46428fe9ecb2756

实时数据更新 —— 使用 GraphQL 订阅