如何从自定义React Query Hook中获取isLoading状态？

你的自定义Hook目前只返回了查询到的posts数据，要获取isLoading状态，只需修改Hook，把useQuery返回的isLoading（以及其他你需要的状态，比如isError、error等）一起返回即可，具体步骤如下：

1. 修改自定义Hook的返回值 #

将原Hook的返回类型从Post[]改为包含posts和isLoading的对象，同时修复原代码中未传入user参数的问题（原代码里getUserDiscussions(user)的user变量未定义）：

async function getUserDiscussions(
  user: User | null
): Promise<Post[] | null> {
  const { data } = await axiosInstance.get(`/getUserPosts`);
  return data;
}

export function usePosts(user: User | null) {
  const fallback: Post[] = [];
  const { data: posts = fallback, isLoading } = useQuery(
    [queryKeys.posts, user], // 将user加入查询键，确保user变化时自动重新查询
    () => getUserDiscussions(user),
    { enabled: !!user } // 可选：仅当user存在时才执行查询，避免无效请求
  );
  return { posts, isLoading };
}

2. 在组件中调用并解构状态 #

在组件里调用Hook时，解构出posts和isLoading，就能用isLoading控制UI渲染了：

const { posts, isLoading } = usePosts(currentUser);

// 示例：根据isLoading状态渲染不同UI
if (isLoading) {
  return <div>加载中...</div>;
}

return (
  <div>
    {posts.map(post => (
      <div key={post.id}>{post.title}</div>
    ))}
  </div>
);

补充说明 #

• 如果需要其他状态（比如请求错误状态isError、错误信息error），可以在useQuery的解构中添加对应字段，一起返回即可。
• 将user加入查询键数组，是为了保证用户信息变化时，React Query自动触发新的查询，避免数据不一致。

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