有没有办法在react-query的QueryClient上配置基本url？

Question

嗯，我有一个非常简单的文件，我从反应查询库导出 QueryClient：

/queryClient.ts

import { QueryClient } from "react-query";

export const queryClient = new QueryClient();

有没有办法设置基本网址，或者我应该使用上下文提供程序之类的东西来做到这一点？

Answer 1

嗯，如本文所示：

React 查询和 TypeScript

在文档上：

默认查询功能

您可以配置默认查询功能：

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            queryFn: async ({ queryKey: [url] }) => {
                if (typeof url === 'string') {
                    const { data } = await axios.get(`${BASE_URL}/${url.toLowerCase()}`)
                    return data
                }
                throw new Error('Invalid QueryKey')
            },
        },
    },
});

能够调用 UseQuery 实例，仅传递 api 方法调用的参数：

// You can even leave out the queryFn and just go straight into options
 function Post({ postId }) {
   const { status, data, error, isFetching } = useQuery(`/posts/${postId}`, {
     enabled: !!postId,
   })
 
   // ...
 }

Answer 2

reactQuery

是一个包装器。提出请求的不是工具。如果需要配置网络请求，则需要在执行请求的工具上进行，而不是在包装器上进行。您可以为

fetch

API 或

axios

包设置默认配置，例如：

axios.defaults.baseURL = <base_url>

这样，当您在

axios

或

query

中使用

mutation

时，将使用此基本 url。

但是，如果由于某种原因您确实需要在不接触 HTTP 客户端的情况下配置

reactQuery

本身，您可以定义一个默认的

mutation

或

query

函数，它将按照您想要的方式使用 HTTP 客户端，正如前面的答案指出的那样出：

来自文档（https://tanstack.com/query/v4/docs/framework/react/guides/default-query-function）：

// Define a default query function that will receive the query key
const defaultQueryFn = async ({ queryKey }) => {
  const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
  )
  return data
}

// provide the default query function to your app with defaultOptions
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryFn: defaultQueryFn,
    },
  },
})