在 React 应用中使用 GraphQL 订阅

2020-11-16 08:00:00 · 飞浪

订阅可让您的应用实时响应后端数据变化。本指南演示了如何在 React 应用中使用 graphQL 订阅。

介绍

现代应用程序越来越实时。Web 应用程序中实时更新的一些示例包括通知更新、聊天消息应用程序和金融市场更新。GraphQL 借助名为订阅的功能，可以轻松创建具有低延迟、实时更新的应用程序。

在本指南中，您将学习如何使用订阅从 GraphQL 服务器订阅实时更新。上一篇指南《如何在 React 应用中设置 GraphQL》介绍了如何使用 Apollo Client 设置带有 GraphQL 的新 React 项目。本指南以您在那里学到的知识为基础。在这里，您将学习如何通过设置连接来让客户端与后端保持同步，以允许您的服务器在发生更新时主动推送更新。

了解如何在架构中定义订阅

GraphQL 的优势之一是其强类型架构。这意味着您可以一目了然地看到哪些资源是可查询和可变的。如果 GraphQL 后端支持，此架构还包含有关订阅的信息，订阅是单独的根类型。如果您想象Apollo 的 GraphQL ExchangeRate 沙盒具有订阅支持，那么架构将类似于以下代码片段：

      type ExchangeRate {
  currency: String
  rate: String
  name: String
}

type Query {
  rates(currency: String!): [ExchangeRate]
}

type Subscription {
  ratesUpdated(currency: String!): ExchangeRate
}
    

存在一个名为Subscription的根类型。这是一种特殊的可选类型。它可以有一个或多个字段。在本例中， ratesUpdated是一个客户端可以通过传入货币来订阅的字段；每次在服务器上更新该货币时，都会向正在监听的客户端推送一条消息。

在 React 客户端中启用 Web Socket 支持

要订阅更新，请使用 Web 套接字而不是 HTTP。IETF标准文档描述了使用 Web 套接字而不是 HTTP 的动机。与 HTTP 相比，Web 套接字的优势在于传输协议的开销较低。当您的服务器经常进行小更新时，这很有用。

为了使用 GraphQL 在 React 应用程序中支持 web-sockets，你需要安装一个包：

      yarn add subscriptions-transport-ws

然后将src/ApolloClient/client.js文件更新为：

      import { ApolloClient, ApolloLink, InMemoryCache, split } from "@apollo/client";
import { HttpLink } from "apollo-link-http";
import { WebSocketLink } from '@apollo/client/link/ws';

const httpLink = new HttpLink({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
});

const wsLink = new WebSocketLink({
  uri: "ws://48p1r2roz4.sse.codesandbox.io",
  options: {
    reconnect: true
  }
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([splitLink]),
});
    

您已更新链接选项，该选项可自定义从 graphQL 操作到后端的数据流。在本例中，使用拆分操作来合并两个链接。进行变更或查询时，将使用 HTTP 作为传输方法。如果请求订阅操作，则指示ApolloClient改用 web-sockets。

订阅更新

现在您已经正确配置了正确的包和链接，您可以开始在后端订阅数据更新。

下面的代码片段演示了一个订阅货币汇率变化的简单 React 组件。

      import React from "react";
import { useQuery, gql, useSubscription } from "@apollo/client";

const RATES_UPDATED = gql`
  subscription OnRatesUpdated($currency: string!) {
    ratesUpdated(postID: $currency) {
      currency
      rate
      name
    }
  }
`;

const LatestRates = ({ currency }) => {
  const { data: { ratesUpdated }, loading } = useSubscription(
    RATES_UPDATED,
    { variables: { currency } }
  );
  return <h4>New rates: {!loading && ratesUpdated.rate}</h4>;
};

export default LatestRates;
    

请注意，该代码与带有 graphQL 查询的组件非常相似。只有细微的差别：

您没有使用useQuery钩子，而是使用了useSubscription钩子。
该钩子仍然以与useQuery钩子相同的方式返回loading、data和error。
订阅也会在组件首次创建时开始。

结论

订阅是一种额外的工具，可让您的应用实时响应后端数据更改。本指南演示了如何在 React 应用中使用 graphQL 订阅。您可以通过阅读subscribeToMore 函数来进一步巩固这些技能。此函数允许您结合进行初始查询和使用订阅来监听增量更新。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 React 应用中使用 GraphQL 订阅

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

type ExchangeRate { currency: String rate: String name: String } type Query { rates(currency: String!): [ExchangeRate] } type Subscription { ratesUpdated(currency: String!): ExchangeRate }

import { ApolloClient, ApolloLink, InMemoryCache, split } from "@apollo/client"; import { HttpLink } from "apollo-link-http"; import { WebSocketLink } from '@apollo/client/link/ws'; const httpLink = new HttpLink({ uri: "https://48p1r2roz4.sse.codesandbox.io", }); const wsLink = new WebSocketLink({ uri: "ws://48p1r2roz4.sse.codesandbox.io", options: { reconnect: true } }); const splitLink = split( ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === 'OperationDefinition' && definition.operation === 'subscription' ); }, wsLink, httpLink, ); export const client = new ApolloClient({ cache: new InMemoryCache(), link: ApolloLink.from([splitLink]), });

import React from "react"; import { useQuery, gql, useSubscription } from "@apollo/client"; const RATES_UPDATED = gql` subscription OnRatesUpdated($currency: string!) { ratesUpdated(postID: $currency) { currency rate name } } `; const LatestRates = ({ currency }) => { const { data: { ratesUpdated }, loading } = useSubscription( RATES_UPDATED, { variables: { currency } } ); return <h4>New rates: {!loading && ratesUpdated.rate}</h4>; }; export default LatestRates;