React Apollo Client缓存中NEW_BOOKS与ALL_BOOKS查询结果混淆问题

问题根因 #

这是Apollo Client缓存键冲突导致的问题：relayStylePagination() 默认只会把 first/after/last/before 这几个标准Relay分页参数作为缓存区分的依据，不会自动识别你自定义的filters参数。两个查询虽然传入的过滤规则完全不同，但在缓存中会被判定为同一个books字段的查询，后触发的ALL_BOOKS查询结果会覆盖之前NEW_BOOKS的缓存结果，就出现了NEW_BOOKS数据变undefined、或者被替换成ALL_BOOKS结果的现象。

解决方案 #

你需要在relayStylePagination配置里指定要把filters参数也加入缓存键的计算逻辑，修改缓存配置如下：

const cache = new InMemoryCache({
    typePolicies: {
        Query: {
            fields: {
                // 传入keyArgs配置，指定filters参数也要作为缓存区分键
                books: relayStylePagination(["filters"]),
            },
        }
    },
});

补充说明 #

如果后续还有其他需要区分同字段不同查询的参数，也可以一并加在keyArgs的数组里，Apollo Client会把这些参数的取值组合起来生成唯一的缓存键，不同参数的查询就不会互相覆盖了。

内容的提问来源于stack exchange，提问作者FLash