GraphQL Subscriptions 怎么做？

GraphQL Subscriptions 是一种实时数据推送机制，它可以让客户端实时地接收服务器端的数据更新。它与传统的轮询方式相比，具有更高的效率和更低的延迟。在前端开发中，我们经常需要使用 GraphQL Subscriptions 来实现实时聊天、实时通知等功能。

前端订阅

前端订阅是指客户端通过 GraphQL 客户端库（如 Apollo Client）向服务器端订阅某个特定的数据更新。当服务器端的数据更新时，客户端会立即收到更新通知，并且可以根据更新的数据进行相应的操作。

以下是一个简单的前端订阅的示例代码：

// javascriptcn.com 代码示例
import { gql } from '@apollo/client';
import { useSubscription } from '@apollo/client';

const SUBSCRIPTION = gql`
  subscription {
    newMessage {
      id
      text
    }
  }
`;

function Chat() {
  const { data } = useSubscription(SUBSCRIPTION);

  return (
    <div>
      {data && (
        <div>
          <p>{data.newMessage.text}</p>
        </div>
      )}
    </div>
  );
}

在上面的代码中，我们订阅了一个名为 newMessage 的数据更新。当服务器端有新的消息时，客户端会立即收到更新通知，并且可以根据更新的数据渲染出相应的界面。

后端服务器

后端服务器是指服务器端通过 GraphQL 服务器库（如 Apollo Server）向客户端推送某个特定的数据更新。当服务器端的数据更新时，客户端会立即收到更新通知，并且可以根据更新的数据进行相应的操作。

以下是一个简单的后端服务器的示例代码：

// javascriptcn.com 代码示例
const { ApolloServer, gql, PubSub } = require('apollo-server');

const pubsub = new PubSub();

const typeDefs = gql`
  type Message {
    id: ID!
    text: String!
  }

  type Query {
    messages: [Message!]!
  }

  type Mutation {
    sendMessage(text: String!): Message!
  }

  type Subscription {
    newMessage: Message!
  }
`;

const messages = [];

const resolvers = {
  Query: {
    messages: () => messages,
  },
  Mutation: {
    sendMessage: (parent, args) => {
      const message = { id: messages.length, text: args.text };
      messages.push(message);
      pubsub.publish('NEW_MESSAGE', { newMessage: message });
      return message;
    },
  },
  Subscription: {
    newMessage: {
      subscribe: () => pubsub.asyncIterator(['NEW_MESSAGE']),
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

在上面的代码中，我们定义了一个名为 newMessage 的数据更新，当服务器端有新的消息时，我们通过 pubsub.publish 方法将更新的数据推送给客户端。客户端可以通过订阅 newMessage 来接收服务器端的更新通知。

总结

GraphQL Subscriptions 是一种非常强大的实时数据推送机制，它可以让客户端实时地接收服务器端的数据更新。在前端开发中，我们经常需要使用 GraphQL Subscriptions 来实现实时聊天、实时通知等功能。通过本文的介绍，相信大家已经对 GraphQL Subscriptions 有了更深入的了解，可以在实际开发中灵活运用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65869b99d2f5e1655d10552d