在不使用 refetchQueries 的情况下更新 Apollo GraphQL 缓存？

Question

我有一个使用 Apollo 客户端（版本 1.x）访问 GraphQL 服务器的 React 应用程序。有一个看起来像这样的服务器架构。

type Query {
  currentShop: Shop
}
type Shop {
  id: ID!
  name: String!
  products: [Product!]!
  ...etc
}

我确实有这样定义的dataIdFromObject。

const dataIdFromObject = o => {
  if (o.__typename != null && o.id != null) {
    return `${o.__typename}-${o.id}`
  }
  return null
}

在整个应用程序中，我正在运行查询currentShop 的不同字段。在不同的点上，还有一些突变正在改变 currentShop 并且突变总是返回导致 Shop 类型。但是，与currentShop 无关，因此 Apollo 无法知道如何更新根查询缓存指针。

我已经用CodeSandbox 做了完整的演示来代表这个问题。后端使用Apollo LaunchPad 制作。选择一个不同的分支，等待几秒钟（没有进行优化），它就可以工作了。

“魔法”发生在ShopSelectButton 组件中。如果您注释掉 refetchQueries 行，事情就会被破坏。商店在服务器上被正确选择（并且你在重新加载后看到它），但客户端就像死动物一样。

我的问题是refetchQueries，因为它使代码耦合得太紧了。我不想在应用程序的某个部分使用一个组件来了解任何其他组件及其需求。老实说，重新获取意味着它会绕过整个缓存，并且总是从后端读取，这在大多数情况下是不必要的。

我想知道还有什么其他方法可以解决这个问题。架构是否应该构建得更加无状态，并将状态保留在前端应用程序中？

Answer 1

我认为突变应该可以在不重新获取查询的情况下工作。您只需在突变结果正文中添加相关查询中的所有必需数据。

您是否尝试为 chrome 安装 apollo 客户端开发工具扩展？在那里，您可以轻松查看不同查询中的 currentShop 元素是否通过 typename 和 id 与 Shop 类型相关。 如果是这种情况，apollo 应该在突变后更新。

要获取正确更新突变结果所需的所有数据，我建议您向应用程序添加片段结构。这意味着所有需要来自商店的数据的组件都有一个定义需求的片段字段。 收集片段并将其添加到突变体中。当然，这样做你在其他组件和突变之间有相同的耦合。

另一种选择是将 Shop 类型的所有可能数据添加到突变结果中。