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

Question

我正在使用 React、Apollo 和 GraphQL 构建一个实时应用程序。我的计划是组件将发出查询，然后依赖订阅来保持客户端缓存与后端数据实时一致。但是，我不相信这会起作用，因为在卸载组件时我将不得不取消订阅。当组件再次挂载时，结果将从查询缓存中获取，因此它们实际上会过期，因为在订阅关闭后发生的所有更改都将丢失。再次打开订阅也意味着结果会变得一团糟，因为在这期间错过了更改。

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

query {
  customers {
    id
    name
    phoneNo
  }
}

和订阅：-

subscription customersUpdated {
  customersUpdated {
    id
    name
    phoneNo
  }
}

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

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

Answer 1

你可以做一些事情：

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

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