react-native - 为聊天应用程序缓存 apollo 客户端的最佳方式是什么？

Question

当我将 apollo 客户端缓存用于聊天应用程序时，出现逻辑错误。

例如，我去第一个房间缓存显示 10 条消息，当我这次单击另一个房间时，我会收到有关上次访问房间的消息？ 我的缓存

const cache = new InMemoryCache({
typePolicies: {
Query: {
  fields: {
    lastRooms: offsetLimitPagination(),
    lastTopics: offsetLimitPagination(),
    topicDetail: offsetLimitPagination(),
    // chatDetail: offsetLimitPagination(),
    chatDetail: {
      keyArgs:['limit'],
      merge(existing=[], incoming=[], { readField }) {
        try {
          let merged = existing 
          const existingIdSet = new Set(merged.map(message => readField("_id", message)));
          if (incoming) {
            incoming = incoming.filter(message => !existingIdSet.has(readField("_id", message)))
          }
          return [...merged, ...incoming]
        } catch (error) {
          console.log("Apollo Cache chatDetail Query fields Erorr:", error);
        }
      }
    }, 
  }
}
},
});

这是房间

这是第一个房间，只有 2 条信息

这是K3房间，有16条消息

Answer 1

这是关于 keyArgs 字段的。keyArgs 字段必须是您要按数据缓存的内容，您应该将 keyArgs 字段设置为

例如，如果您的查询参数是（房间，用户，...），您应该使用keyArgs:["room"] 缓存的 baceuse 应该像 roomDetail 那样：

const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
lastRooms: offsetLimitPagination(),
lastTopics: offsetLimitPagination(),
topicDetail: offsetLimitPagination(),
chatDetail: {
  keyArgs:['room'],
  merge(existing=[], incoming=[], { readField }) {
    try {
      let merged = existing 
      const existingIdSet = new Set(merged.map(message => readField("_id", message)));
      if (incoming) {
        incoming = incoming.filter(message => !existingIdSet.has(readField("_id", message)))
      }
      return [...merged, ...incoming]
    } catch (error) {
      console.log("Apollo Cache chatDetail Query fields Erorr:", error);
    }
  }
}, 
}
}
},
});