Apollo Type Policies：如何读取Query的同级字段？

当然可以实现！我之前在项目里正好做过类似的需求，核心就是利用Apollo Client Type Policy里的read函数，通过缓存对象来读取同级的allProducts字段。

下面是完整的配置示例，直接套用到你的代码里就行：

import { makeVar } from '@apollo/client';
import { gql } from '@apollo/client';

// 先定义你的reactive var，存储购物车的产品ID数组
const cartItemIdsVar = makeVar([]);

const typePolicies = {
  Query: {
    fields: {
      getCartItems: {
        read(_, { cache }) {
          // 从缓存中读取已有的allProducts数据
          // 注意这里的查询要和你获取allProducts时用的查询结构完全一致
          const queryResult = cache.readQuery({
            query: gql`
              query FetchAllProducts {
                allProducts {
                  id
                  # 这里列出你需要的所有产品字段，比如name、price等
                  name
                  price
                }
              }
            `
          });

          // 处理可能的空结果，避免报错
          const allProducts = queryResult?.allProducts || [];
          // 获取当前购物车的ID列表
          const currentCartIds = cartItemIdsVar();

          // 筛选出ID匹配的产品，就是你的购物车列表了
          return allProducts.filter(product => currentCartIds.includes(product.id));
        }
      },
      allProducts: {
        // 这里保留你原有的缓存配置，比如如果是无参数的列表可以设置keyArgs: false
        keyArgs: false,
        // 其他缓存策略，比如merge逻辑等，根据你的需求添加
      }
    }
  }
};

几个关键要点： #

• read函数的作用：本地字段的read函数是用来计算字段返回值的，每次查询getCartItems或者依赖的reactive var更新时，这个函数都会重新执行。
• 通过cache读取同级字段：read函数的第二个参数里的cache对象是关键，它可以让你读取缓存中任何已存在的数据，包括Query下的其他字段。
• 查询结构一致性：调用cache.readQuery时，传入的查询必须和你获取allProducts时使用的查询结构完全匹配，不然Apollo找不到对应的缓存数据。
• 处理空缓存：如果allProducts还没被缓存（比如用户还没加载过产品列表），readQuery会返回undefined，所以一定要加默认值避免报错。

如果你的allProducts是带参数的查询（比如分页、分类过滤），那你需要在readQuery里传入对应的variables参数，确保读取的是正确的那组缓存数据。

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