GraphQL apollo 缓存没有 id 的查询

Question

我正在编写一个使用 anist graphql 后端的应用程序。该后端提供了带有页面查询的分页。所以分页查询本身看起来像这样：

1. 对于动漫屏幕：

    query ($page: Int, $perPage: Int) {
      Page (page: $page, perPage: $perPage) {
        media (type: ANIME) {
          id
          title {
            romaji
          }
        }
      }
    }

2. 对于漫画屏幕：

    query ($page: Int, $perPage: Int) {
      Page (page: $page, perPage: $perPage) {
        media (type: MANGA) {
          id
          title {
            romaji
          }
        }
      }
    }

在我的应用程序中有两个屏幕“漫画”和“动漫”，它们都发送此查询，但类型不同（动漫或漫画）。此时我遇到了一个问题。页面查询没有 id，因此不可能在缓存中拆分 ANIME 的页面查询和 MANGA 的页面查询。分页也会影响这个问题，因为每次用户到达列表末尾时，我都会发送一个新的页面查询。 正如我所看到的，它应该以下面的方式工作：

1. ANIME 和 MANGA 的页面查询应该在缓存中分开，换句话说缓存应该以某种方式知道它们是不同的对象。
2. 响应下一页请求时，我应该将媒体合并到漫画页面或动画页面中。

您对如何获得此类功能有什么想法吗？ 现在，我考虑一个在屏幕更改时清除缓存的选项，这将使我避免问题的第一部分，缓存将始终只包含一个页面查询。但问题的第二部分仍然存在。在每个新页面上获取的缓存中的页面将被覆盖。

Answer 1

所以我找到了一种方法来满足我的要求。它包括 2 个步骤：

1. 我向 ApolloClient 添加了这样的 typePolicies：

typePolicies: {
    Query: {
        fields: {
            Page: {merge: true},
        },
    },
},

2. 添加了 updateQuery，描述了在 fetchMore 上应该如何更改缓存：

fetchMore({
    variables: {
        ...updateQueryVariable(searchQuery, sortType),
        page: pageNumber,
    },
    updateQuery: (prev, {fetchMoreResult}) => {
        if (!fetchMoreResult) {
            return prev;
        }
        return {
            ...prev,
            Page: {
                ...prev.Page,
                media: [
                    ...(prev.Page?.media as Media[]),
                    ...(fetchMoreResult.Page?.media as Media[]),
                ],
            },
        };
    },
});

结果我得到了这样的缓存：

所以现在 Page 的 apollo 缓存包含按类型 ANIME 或 MANGA 分隔的结果。 唯一的问题是，正如我发现的那样，updateQuery 已被弃用，因此不确定这种方法将有效多久。