reactjs - 具有自定义 id (keyFields) 的 Apollo Client readFragment

Question

引用，使用 "@apollo/client": "^3.5.5",

我已经按照 docs 中的建议定义了我的 typePolicies :

HistoricalData: {
    keyFields: ["variable", "workspace"],
    fields:{...}
  }

当我的缓存建立时，我希望我的 cacheId 是这样的

 <__typename>:<id>:<id>
 HistoricalData:${props.variable}:${props.workspace}`;

但是，当我查看 Apollo 缓存时，它是使用对象中的 keyField 名称和值创建的，例如

HistoricalData:{"variable":"GAS.TOTAL","workspace":"ABC"}

代替

HistoricalData:GAS.TOTAL:ABC

所以当我尝试读取片段时它返回 null

client.readFragment({
  id: `HistoricalData:${props.variable}:${props.workspace}`,
  fragment: apolloGQL`fragment MyHistorical on Historical {
    variable
    workspace
}`})

如果我在缓存中存在的结构中创建我的 id 并使用它读取片段，它实际上会从缓存中返回一个值。

有没有其他人注意到 Apollo 客户端没有在他们在 docs 中描述的结构中创建缓存 ID？ ？

Answer 1

经过一些研究，我找到了处理这种情况的正确方法。我知道您已经继续前进，但以防万一其他人将来遇到同样的问题，请执行以下操作:

如 documentation 中所述对于自定义缓存 ID，正如您所指出的，缓存 ID 将是一个字符串化对象。它在文档中不是很明确，但此时它为缓存 ID 提供了这个嵌套示例:

Book:{"title":"Fahrenheit 451","author":{"name":"Ray Bradbury"}}

但作为用户，我们不必为这个 ID 的格式而烦恼，因为有一个 helper为此，调用了 cache.identify。

对于你的具体情况，你可以使用这样的东西:

const identifiedId = cache.identify({
   __typename: 'HistoricalData',
   variable: 'GAS.TOTAL',
   workspace: 'ABC'
});

cache.readFragment({
   id: identifiedId,
   fragment: apolloGQL`fragment MyHistorical on Historical {
    variable
    workspace
}`
});