Relay的fetchQuery返回数据是否有实现缓存的方法？

Relay 原生的 fetchQuery 默认每次调用都会触发网络请求，不会主动复用之前同参数请求的返回结果，你可以通过以下两种方案实现需求：

• 方案一：复用 Relay Environment 内置 Store 缓存
  fetchQuery 请求成功后会自动将数据写入 Relay 内置的 Store 中，你可以在发起请求前先校验 Store 中是否存在匹配的完整数据，存在就直接读取缓存：

import { createOperationDescriptor, getRequest } from 'relay-runtime';

const queryRequest = getRequest(Query);
const variables = { where: { name: { contains: "test" } } };
const operation = createOperationDescriptor(queryRequest, variables);

// 检查本地Store是否已有完整数据
const storeSnapshot = RelayEnvironment.check(operation);
if (storeSnapshot) {
  // 命中缓存直接返回
  resolve(storeSnapshot.data);
} else {
  // 无缓存发起网络请求
  fetchQuery(
    RelayEnvironment,
    Query,
    variables
  ).subscribe({
    next: (data) => {
      resolve(data);
    },
  });
}

• 方案二：自定义全局缓存层
  如果你需要更灵活的缓存控制（比如设置过期时间、跨环境复用缓存），可以自行封装带缓存逻辑的请求方法：

// 全局缓存池，可根据需求替换为 sessionStorage、localStorage 实现持久化
const queryCache = new Map();
// 缓存过期时间示例：10分钟，不需要可以去掉
const CACHE_EXPIRE_TIME = 10 * 60 * 1000;

function cachedFetchQuery(env, query, variables) {
  return new Promise((resolve) => {
    // 生成缓存唯一key：查询名+排序后序列化的参数，避免参数顺序不同导致缓存失效
    const sortedVariables = Object.fromEntries(
      Object.entries(variables).sort(([a], [b]) => a.localeCompare(b))
    );
    const cacheKey = `${query.name}:${JSON.stringify(sortedVariables)}`;

    const cachedItem = queryCache.get(cacheKey);
    if (cachedItem && Date.now() - cachedItem.timestamp < CACHE_EXPIRE_TIME) {
      return resolve(cachedItem.data);
    }

    fetchQuery(env, query, variables).subscribe({
      next: (data) => {
        queryCache.set(cacheKey, {
          data: data,
          timestamp: Date.now()
        });
        resolve(data);
      },
    });
  })
}

// 业务侧调用示例
cachedFetchQuery(
  RelayEnviroment,
  Query,
  { where: { name: { contains: "test" } } }
).then(data => resolve(data))

注意：如果查询参数存在多层嵌套，序列化前需要对所有层级的key做递归排序，避免参数顺序问题导致缓存命中率降低。

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