从usePreloadedQuery捕获错误

usePreloadedQuery 是 React Query 库中的一个 hook，它允许你使用预先加载的查询结果。当你有一个查询需要在组件外部预先执行并希望将其结果传递给组件时，这个 hook 非常有用。

基础概念

usePreloadedQuery 接收两个参数：

queryFn: 这是一个函数，当查询没有缓存结果时，它会被调用来获取数据。
queryKey: 这是一个唯一标识符，用于在 React Query 的缓存中查找或存储查询结果。

优势

预先加载数据: 允许你在组件渲染之前获取数据，从而提高用户体验。
避免不必要的重新渲染: 如果数据已经在缓存中，组件不会因为等待数据而重新渲染。
与 React Query 缓存集成: 自动利用 React Query 的缓存机制，包括自动更新、错误处理和查询取消。

类型

usePreloadedQuery 返回一个包含以下属性的对象：

data: 查询的结果。
isLoading: 一个布尔值，指示数据是否仍在加载中。
isError: 一个布尔值，指示查询是否出错。
error: 如果查询出错，这是错误对象。
isSuccess: 一个布尔值，指示查询是否成功。

应用场景

当你需要在多个组件之间共享预先加载的数据时，或者当你希望在应用启动时预先获取数据以减少后续加载时间时，可以使用 usePreloadedQuery。

捕获错误

在使用 usePreloadedQuery 时，可能会遇到各种错误，例如网络错误、服务器错误或查询函数中的逻辑错误。要捕获这些错误，你可以检查返回对象的 isError 和 error 属性。

import { usePreloadedQuery } from 'react-query';

const fetchData = async () => {
  // 模拟异步请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Failed to fetch data'));
    }, 1000);
  });
};

const MyComponent = () => {
  const { data, isLoading, isError, error } = usePreloadedQuery(
    ['myQueryKey'],
    fetchData,
    {
      staleTime: Infinity, // 设置缓存时间
    }
  );

  if (isLoading) return 'Loading...';
  if (isError) return `Error: ${error.message}`;

  return <div>{data}</div>;
};