使用带有 React 和 Apollo 的 graphql 订阅制作实时应用程序

Question

我正在使用 React、Apollo 和 GraphQL 构建实时应用程序。我的计划是一个组件将发出一个查询，然后依赖于订阅来使客户端缓存与后端数据实时保持一致。但是，我认为这行不通，因为在卸载组件时我将不得不取消订阅。当再次挂载该组件时，结果将从查询缓存中获取，因此它们实际上已经过时了，因为订阅关闭后发生的所有更改都将丢失。同样再次打开订阅将意味着结果会变得混乱，因为两者之间的更改被遗漏了。

例如，在组件 A 中，如果我有一个查询：-

query {
  customers {
    id
    name
    phoneNo
  }
}

和订阅：-

subscription customersUpdated {
  customersUpdated {
    id
    name
    phoneNo
  }
}

customers 查询在 A 首次挂载时运行。结果被缓存。在订阅 customersUpdated 的帮助下记录对客户数据的所有更改。请注意，订阅不会 return 所有客户，而只是需要合并到查询缓存中的更改。卸载 A 后，我取消订阅。假设另一个用户对客户数据进行了 5 次更改，而 A 为我们当前的用户保持未安装状态。当 A 再次挂载时，这 5 个更改已丢失，查询只是从缓存中获取结果。订阅再次开始，但现在数据处于错误状态，因为我们错过了这 5 个更改并且永远不会得到它们！

此处使用订阅的正确模式是什么？我试图避免使用查询进行基于时间的重新获取，因为我希望应用程序实时工作。同样是实时的，我只想提取更改而不是不必要地提取所有数据。

Answer 1

您可以做几件事：

只需对您的 GraphQL 查询使用 network-only 或 cache-and-network 获取策略，以便您在组件安装时获得最新数据。像往常一样初始化订阅。
卸载组件时不要停止订阅，并在组件之外处理您的订阅生命周期。这可能需要更多工作，但您可以控制它何时开始和停止。

但是，我鼓励您多考虑一下应用的哪些部分实际上需要实时。在大多数应用中，只有一小部分体验需要低延迟数据更新，因此仅在小情况下使用订阅可能是更好的策略。归根结底，推断无状态架构的扩展性通常更容易。

使用带有 React 和 Apollo 的 graphql 订阅制作实时应用程序

Making a real time application using graphql subscriptions with React and Apollo

graphql

graphql-js

apollo

react-apollo

graphql-subscriptions