React查询变异:接口调用失败时，通过onError回调从服务器获取响应

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const MyComponent = () => {
  const { data, error, isLoading, isError } = useQuery('myData', fetchData, {
    onError: (error) => {
      console.error('Error fetching data:', error);
      // 在这里可以执行从服务器获取响应的逻辑
      // 例如，尝试从备用服务器获取数据
      fetchBackupData().then((backupData) => {
        console.log('Backup data:', backupData);
      });
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

const fetchBackupData = async () => {
  const response = await fetch('https://backup-api.example.com/data');
  if (!response.ok) {
    throw new Error('Backup server response was not ok');
  }
  return response.json();
};