嵌套缓存的艺术：Apollo GraphQL 中文档存档状态更新

2024-03-04 11:14:00

维护 Apollo GraphQL 中嵌套缓存的艺术

问题陈述

我们有一个 Apollo GraphQL 查询，它获取文档列表并存储在一个嵌套的缓存对象中。该缓存对象包含两个集合：一个用于未存档的文档，另一个用于已存档的文档。为了保持缓存与服务器同步，我们需要找到一种方法来在文档存档状态更改时更新这两个集合。

解决方案：缓存更新

解决此问题的关键在于利用 Apollo GraphQL 的 cache.modify 方法。此方法允许我们使用更新函数修改缓存中的现有对象。

步骤详解

要修改嵌套缓存，请按照以下步骤操作：

获取用户对象标识符： 使用 cache.identify 方法获取要更新的用户对象的标识符。
创建更新函数： 使用 cache.modify 方法创建更新函数。这个函数将修改缓存中的用户对象。
更新嵌套集合： 在更新函数中，使用 fields 选项来更新 documents 嵌套集合。对于每个集合，执行以下操作：
- 存档文档： 从未存档的集合中移除文档，并将其添加到已存档的集合中。
- 取消存档文档： 从已存档的集合中移除文档，并将其添加到未存档的集合中。
应用缓存更新： 使用 cache.modify 方法应用缓存更新。

代码示例

const userId = 123; // 用户 ID
const archived = true; // 文档是否已存档

cache.modify({
  id: cache.identify({ __typename: "User", userId }),
  fields: {
    documents(documents) {
      const unarchivedDocuments = documents.filter((doc) => !doc.archived);
      const archivedDocuments = documents.filter((doc) => doc.archived);

      if (archived) {
        // 存档文档
        const doc = unarchivedDocuments.find((doc) => doc.id === documentId);
        if (doc) {
          unarchivedDocuments.splice(unarchivedDocuments.indexOf(doc), 1);
          archivedDocuments.push(doc);
        }
      } else {
        // 取消存档文档
        const doc = archivedDocuments.find((doc) => doc.id === documentId);
        if (doc) {
          archivedDocuments.splice(archivedDocuments.indexOf(doc), 1);
          unarchivedDocuments.push(doc);
        }
      }

      return [...unarchivedDocuments, ...archivedDocuments];
    },
  },
});