Is there a way to configure a base url on react- query 's QueryClient?

在使用 react-query 进行数据获取和管理时，QueryClient 本身并不直接支持配置一个基本 URL （base URL）。react-query 主要负责数据的获取、缓存、同步和更新状态等功能，但它并不涉及如何具体发送请求。因此，配置基本 URL 主要是通过请求发送的工具或方法来实现，如 axios 或 fetch 等。

不过，您可以通过自定义的函数来集成基本 URL 的配置，并在这个函数中使用 react-query。这样做可以保持代码的整洁和一致性，并且可以在整个项目中重用这个有基本 URL 的请求函数。下面是一个使用 axios 和 react-query 来实现带有基本 URL 的请求的示例：

1. 首先，安装和引入必要的库:

   bash
   npm install axios react-query

2. 设置基本的请求函数:

   javascript
   import axios from 'axios';
   
   const axiosInstance = axios.create({
     baseURL: 'https://api.example.com'
   });
   
   const fetchData = async (url) => {
     const { data } = await axiosInstance.get(url);
     return data;
   };

3. 在 React 组件中使用 react-query 和自定义的 fetchData 函数:

   javascript
   import { useQuery } from 'react-query';
   
   function MyComponent() {
     const { data, error, isLoading } = useQuery('data', () => fetchData('/endpoint'));
   
     if (isLoading) return <div>Loading...</div>;
     if (error) return <div>An error occurred: {error.message}</div>;
   
     return (
       <div>
         {/* render your data here */}
         {data.map(item => (
           <div key={item.id}>{item.title}</div>
         ))}
       </div>
     );
   }

通过这种方式，您可以集中管理 API 的基本 URL，并且使其与 react-query 的缓存和状态管理功能结合，有效提高应用程序的性能和用户体验。