如何使用SWR实现基于登录用户数据的延迟API查询？

我明白你的问题了——你想在loggedInAdvisor加载完成后再用SWR发起请求，但React Hooks的规则不允许把useSWR放在条件块里。其实SWR本身就支持通过falsy的请求key来暂停请求，这正是解决这个问题的关键。

核心思路 #

SWR的第一个参数（请求key）如果是null、undefined或者其他falsy值，它会自动暂停请求，直到key变成truthy值。我们可以利用这一点，把key和loggedInAdvisor的存在状态绑定起来。

修改后的代码实现 #

export const fetchDetailedAdvisorPrognoses = (body: DetailedAdvisorPrognosesRequest): Promise<DetailedAdvisorPrognoses[]> | null => {
  const accessToken = getFromPersistance(ACCESS_TOKEN);
  if (!accessToken) {
    return null;
  }
  return fetch('https://x/api/v2/advisors/prognoses', {
    method: 'POST',
    headers: {
      ...generateDefaultHeaders(),
      'Content-Type': 'application/json',
      Authorization: getAuthorizationHeader(accessToken),
    },
    body: JSON.stringify(body),
  }).then(res => res.json());
};

function Workload(): ReactElement | null {
  const { loggedInAdvisor } = useAuthentication();
  
  // 计算日期范围，用useMemo避免重复计算
  const [fromDate, toDate] = React.useMemo(() => [
    moment().subtract(1, 'day').format('YYYY-MM-DD'),
    moment().add(13, 'days').format('YYYY-MM-DD'),
  ], []);

  // 1. 绑定请求key：只有loggedInAdvisor存在时，key才为有效值
  const swrKey = loggedInAdvisor ? ['workload-data', loggedInAdvisor.id, fromDate, toDate] : null;

  // 2. 使用SWR，key为null时自动暂停请求
  const { data, error } = useSWR<DetailedAdvisorPrognoses[] | null>(
    swrKey,
    () => {
      // 这里可以安全使用loggedInAdvisor，因为只有key有效时SWR才会调用此函数
      return fetchDetailedAdvisorPrognoses({
        advisorIds: [loggedInAdvisor.id],
        fromDate,
        toDate,
      });
    }
  );

  // 处理加载/错误状态
  if (!loggedInAdvisor || !data) {
    return <LoadingV2 isLoading={true} />;
  }

  if (error) {
    return <span>Error: {error.message}</span>;
  }

  if (data.length > 0) {
    const [first] = data;
    const days: WorkloadDay[] = Object.keys(first.daysMap).map(date => ({
      date,
      value: first.daysMap[date],
    }));
    return <WorkloadLayout before={first.before} days={days} />;
  }

  return null;
}

关键修改点说明 #

• 请求key的动态控制：我们把key设置成包含loggedInAdvisor.id、日期范围的数组，当loggedInAdvisor不存在时key为null，SWR会自动暂停请求，避免出现Cannot read property 'id' of undefined的错误。
• Fetcher的安全调用：因为只有当key为truthy值时，SWR才会执行fetcher函数，所以在fetcher里可以放心使用loggedInAdvisor.id。
• 加载状态合并：把loggedInAdvisor未加载和data未返回的情况合并，统一显示加载组件，让用户体验更流畅。

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