如何从 React Query 自定义挂钩获取 isLoading答案

【问题标题】：How to get isLoading from React Query custom hook如何从 React Query 自定义挂钩获取 isLoading
【发布时间】：2023-01-21 21:07:06
【问题描述】：

我正在尝试从自定义 React 查询挂钩返回 isLoading。

这是我的钩子：

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

export function usePosts(): Post[] {

  const fallback: Post[] = [];
  const { data: posts = fallback } = useQuery(
    [
      queryKeys.posts,
    ],
    () => getUserDiscussions(user),
  );
  return posts;
}

然后我在这样的组件中调用钩子：

const posts = usePosts()

然后我希望能够访问 isLoading 并相应地更新 UI。

如何从自定义挂钩中的查询访问 isLoading 并在组件中使用它？

【问题讨论】：

只需返回查询本身，您就可以访问它的方法！
谢谢@VahidAlimohamadi，你能举个例子说明我该怎么做吗？
第一个答案显示@sgrmhdk 如何返回isLoading 方法。您也可以返回整个查询对象。 return useQuery(...) 而不是 posts 和 isLoading。

标签： reactjs react-query

【解决方案1】：

您可以从 useQuery 获取它并从您的函数返回相同的内容。

export function usePosts(): Post[] {

  const fallback: Post[] = [];
  const { data: posts = fallback, isLoading } = useQuery(
    [
      queryKeys.posts,
    ],
    () => getUserDiscussions(user),
  );
  return {posts,isLoading};
}

【讨论】：

tanstack.com/query/latest/docs/react/reference/… 您可以在此处参考文档。