TanStack useQueries链式调用及props.users未定义问题解决

问题描述 #

我有一个使用TanStack Query v4和React 18的函数式组件，代码如下：

const Userview = (props) => {
...
const userQueries = useQueries({
    queries: props.users.map((user) => {
        return {
            queryKey: ['users', user.id],
            queryFn: () => fetchUserById(user.id),
                {
                    enabled: props.users,
                },
                {
                    headers: {
                        'Content-Type': 'application/json',
                    }
                }),
        },
        {
            onSuccess: (v) => {
                console.log(v)
            },
            onError: (e) => {
                console.log(e)
            },
        }
    }),
})

useEffect(() => {
    if (props.users) {
        console.log(props.users);
    }
}, [props.users])
...
}

我存在两个疑问：

1. 如何链式调用TanStack useQueries？
2. 首次挂载时props.users为undefined，导致props.users.map()报错，如何在props.users不为undefined时才执行这些查询？

我仅在官方文档中找到单个useQuery的相关处理案例，求正确的实现方式或最佳实践。

解决方案 #

一、解决props.users为undefined的报错问题 #

直接在map调用前处理空值，并通过enabled选项精准控制查询触发时机，修正后的代码如下：

const Userview = (props) => {
  // 给props.users设置默认空数组，避免map调用在undefined上
  const users = props.users ?? [];

  const userQueries = useQueries({
    queries: users.map((user) => ({
      queryKey: ['users', user.id],
      queryFn: () => fetchUserById(user.id),
      // 仅当用户数据存在时启用当前查询
      enabled: !!users.length && !!user,
      onSuccess: (data) => {
        console.log('用户查询成功:', data);
      },
      onError: (error) => {
        console.error('用户查询失败:', error);
      },
      // 注意：自定义请求headers应在fetchUserById内部实现，示例如下：
      // const fetchUserById = async (userId) => {
      //   const response = await fetch(`/api/users/${userId}`, {
      //     headers: { 'Content-Type': 'application/json' }
      //   });
      //   if (!response.ok) throw new Error('请求失败');
      //   return response.json();
      // };
    })),
  });

  useEffect(() => {
    if (props.users) {
      console.log(props.users);
    }
  }, [props.users]);

  // 组件其他逻辑...
};

核心优化点：

• 使用??空值合并运算符给props.users设置默认空数组，避免map报错
• 通过enabled选项确保只有当用户数据有效时才触发查询，避免无效请求

二、useQueries的链式调用实现 #

TanStack Query的useQueries默认并行执行多个查询，若需要链式调用（即依赖前置查询结果或串行执行），可通过以下两种方式实现：

1. 基于前置查询状态的依赖式调用

如果后续查询需要依赖某个前置查询的结果，可通过enabled选项关联前置查询的isSuccess状态：

const Userview = (props) => {
  const users = props.users ?? [];

  // 第一步：执行前置查询（比如获取用户基础列表）
  const baseUserQuery = useQuery({
    queryKey: ['baseUserList'],
    queryFn: fetchBaseUserList,
    enabled: !!users.length,
  });

  // 第二步：基于前置查询的结果，执行用户详情查询
  const userDetailQueries = useQueries({
    queries: baseUserQuery.data?.map((user) => ({
      queryKey: ['userDetail', user.id],
      queryFn: () => fetchUserById(user.id),
      // 仅当前置查询成功且用户数据有效时，启用当前查询
      enabled: baseUserQuery.isSuccess && !!user,
      onSuccess: (data) => console.log('用户详情查询成功:', data),
    })) ?? [],
  });

  // 组件其他逻辑...
};

2. 单个查询内部的串行请求

如果是单个查询需要多步链式请求，直接在queryFn中使用async/await串行执行即可：

const userQueries = useQueries({
  queries: users.map((user) => ({
    queryKey: ['fullUserInfo', user.id],
    queryFn: async () => {
      // 第一步：获取用户基础信息
      const baseInfo = await fetchUserById(user.id);
      // 第二步：基于基础信息获取扩展数据
      const extraInfo = await fetchUserExtraInfo(baseInfo.extraId);
      // 返回合并后的完整数据
      return { ...baseInfo, ...extraInfo };
    },
    enabled: !!users.length && !!user,
  })),
});

核心要点：

• useQueries本身是并行执行，链式依赖需通过enabled关联前置查询状态
• 单查询内部的多步请求，直接在queryFn内用async/await实现串行即可

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