Question

我有一个React应用程序访问带有Apollo客户端（版本1.x）的GraphQL服务器。有一个服务器模式，如下所示。

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构成。选择一个不同的分支，等待几秒钟（没有优化的麻烦）并且它可以工作。

＆＃34;魔法＆＃34;发生在ShopSelectButton组件中。如果你注释掉refetchQueries行，那么事情就会破裂。在服务器上正确选择了商店（重新加载后你会看到它），但客户端就像一只死去的动物。

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

我想知道其他方法是什么。架构是否应该构建为更无状态并将状态保留在前端应用程序中？

Answer 1

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

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

要获得突变结果的所有必需数据以便正确更新，我建议您在应用中添加片段结构。这意味着所有需要商店数据的组件都有一个定义需求的片段字段。收集片段并添加到突变体中。当然，这样做可以使其他组件与突变之间具有相同的耦合。

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