如何等待useMe自定义hook加载完成后再执行后续数据获取操作

问题核心原因 #

这是典型的异步查询依赖时序问题：useMe拉取用户数据是异步操作，首次渲染时me必然是undefined，此时直接访问me.profile_id会直接抛出空值错误，同时第二个查询也会在前置依赖未就绪的情况下提前执行。 #

具体修复方案 #

方案1：调整useActivityList逻辑（优先推荐）

利用useMe返回的加载状态做前置判断，同时给查询hook增加执行条件，确保仅当me就绪后才发起后续查询：

export const useActivityList = () => {
  // 取出useMe返回的加载、错误状态
  const { me, isLoading: meLoading, error: meError } = useMe();

  // 前置拦截：用户信息加载中/加载失败时直接返回对应状态，不执行后续查询
  if (meLoading) return { activityList: [], isLoading: true };
  if (meError) return { activityList: [], isLoading: false, error: meError };

  // 走到此处me必然已存在，不会出现空值问题
  const criteria = { assignment: { uuid: { _eq: me.profile_id } } } as appointment_bool_exp;

  const query = useQuery({
    prepare({ prepass, query }) {
      prepass(
        query.appointment({ where: criteria }),
        'scheduled_at',
        'first_name',
        'last_name',
      );
    },
    suspense: true,
    // 新增查询启用条件：仅当profile_id存在时才执行查询（不同库参数名可能不同，Apollo对应skip参数）
    enabled: !!me?.profile_id
  });

  const activityList = query.appointment({ where: criteria });

  return {
    activityList,
    isLoading: query.$state.isLoading,
  };
};

方案2：父组件前置加载（适配不支持启用条件的查询库）

在父组件优先加载用户信息，等me就绪后再渲染调用useActivityList的子组件，从根源避免空值问题：

// 父组件代码
const ActivityPage = () => {
  const { isLoading, error } = useMe();
  if (isLoading) return <div>加载用户信息中...</div>
  if (error) return <div>用户信息加载失败，请刷新重试</div>
  // 此时me已加载完成，子组件内调用useActivityList不会出现空值
  return <ActivityList />
}

额外优化建议 #

访问me的属性时统一加可选链?.兜底，比如me?.profile_id，可以避免意外的空值报错。

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