如何在 Apollo Client 中使用 GraphQL 订阅-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种强大的数据查询语言，它允许前端开发者定义自己需要返回的数据结构。然而，对于需要实时数据更新的应用程序，GraphQL 查询并不足够。这就是 GraphQL 订阅的作用，它为基于 GraphQL 构建的应用程序提供了实时数据更新的支持。

Apollo Client 是用于构建基于 GraphQL 的应用程序的最流行的 JavaScript 客户端之一。本文将介绍如何在 Apollo Client 中使用 GraphQL 订阅，并提供详细的步骤和代码示例。

什么是 GraphQL 订阅

GraphQL 订阅允许开发者从服务器端实时订阅数据更新。当数据更新时，服务器将推送更新到客户端，客户端将自动响应并显示最新的数据。这种实时数据交互方式对于需要频繁更新的应用程序非常有用，例如聊天应用程序或股市交易应用程序。

GraphQL 订阅通过 WebSocket 连接进行实现，该连接在客户端和服务器之间建立，并允许双方在需要时互相传输数据。一旦建立连接，GraphQL 订阅将监听服务器上定义的特定事件，并在事件发生时自动向客户端发送更新。

要在 Apollo Client 中使用 GraphQL 订阅，您需要执行以下步骤：

步骤 1：安装所需的软件包

首先，需要在项目中安装以下软件包：

# Using npm
npm install subscriptions-transport-ws graphql

# Using Yarn
yarn add subscriptions-transport-ws graphql

这些软件包是用于通过 WebSocket 连接向 GraphQL 服务器发送订阅的必要工具。

步骤 2：创建 WebSocket 连接

在 Apollo Client 中使用 GraphQL 订阅，您需要创建用于 WebSocket 连接的 Transport ，并将它传递给 createNetworkInterface 方法。例如，下面是一个用于创建 WebSocket 连接的 Transport 的示例：

// javascriptcn.com 代码示例
import { SubscriptionClient } from 'subscriptions-transport-ws';

const wsClient = new SubscriptionClient('ws://localhost:3000/graphql', {
  reconnect: true,
});

const networkInterface = createNetworkInterface({
  uri: '/graphql',
  transportBatching: true,
});

networkInterface.use([
  {
    applyMiddleware(req, next) {
      req.options.headers = req.options.headers || {};

      req.options.headers.authorization = localStorage.getItem('token')
        ? `Bearer ${localStorage.getItem('token')}`
        : null;

      next();
    },
  },
  {
    applyBatchMiddleware(reqs, next) {
      if (!reqs.some(({ query }) => includesSubscription(query))) {
        return next();
      } 
        
      for (const req of reqs) {
        if (includesSubscription(req.query)) {
          req.options.transport = wsClient;
        }
      }
 
      next();
    },
  },
]);

通过创建一个 SubscriptionClient 对象，构造函数的第一个参数为 GraphQL 服务器的 WebSocket 地址，第二个参数为传递 WebSocket 选项。

步骤 3：定义 GraphQL 订阅

接下来，您需要在服务器端定义一个或多个 GraphQL 订阅。GraphQL 订阅的定义与 GraphQL 查询和变异的定义类似，只是您需要使用特定的 subscribe 关键字来定义它们。例如，以下是一个用于定义 GraphQL 订阅的示例：

type Subscription {
  newMessage(userId: ID!): Message!
}

type Message {
  id: ID!
  text: String!
}

该示例定义了一个名为 newMessage 的 GraphQL 订阅，它将订阅特定用户的新消息。每当该用户收到新消息时，GraphQL 服务器将使用 WebSocket 连接向客户端发送更新。

步骤 4：订阅 GraphQL 数据

在您定义一个或多个 GraphQL 订阅并创建了用于 WebSocket 连接的 Transport 后，您可以使用 Apollo Client 将您的 GraphQL 订阅与组件或界面的 UI 绑定。以下是一个基本示例：

// javascriptcn.com 代码示例
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const NewMessageSubscription = gql`
  subscription newMessage($userId: ID!) {
    newMessage(userId: $userId) {
      id
      text
    }
  }
`;

const Conversation = ({ userId, data: { loading, error, newMessage } }) => {
  if (loading) {
    return <p>Loading...</p>;
  }
 
  if (error) {
    return <p>Error: ${error.message}</p>;
  }
 
  /* Render the conversation UI */
};

export default graphql(NewMessageSubscription, {
  props: ({ data: { loading, error, newMessage } }) => ({
    data: { loading, error, newMessage },
  }),
  options: ({ userId }) => ({
    variables: { userId },
  }),
})(Conversation);

该示例使用 graphql() 函数将用于订阅 GraphQL 数据的组件连接到 Apollo Client。它还使用了 NewMessageSubscription GraphQL 订阅来定义所需的数据结构，并使用 props 对象将订阅的结果传递给组件。

总结

GraphQL 订阅是一种非常有用的功能，它可以实现基于实时数据更新的应用程序。在 Apollo Client 中使用 GraphQL 订阅是非常简单的，只需要安装所需的软件包、创建 WebSocket 连接、定义 GraphQL 订阅并将其与组件或界面 UI 绑定。我希望这篇文章对您有所帮助，在开发基于 GraphQL 的应用程序时，请记得尝试使用 GraphQL 订阅。

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