默认查询函数 | TanStack Query React Docs

默认查询函数

如果您发现自己出于某种原因希望能够为整个应用程序共享相同的查询函数，并且仅使用查询键来标识它应该获取的内容，则可以通过向 TanStack Query 提供默认查询函数来实现：

tsx

// 定义一个将接收查询键的默认查询函数
const defaultQueryFn = async ({ queryKey }) => {
  const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
  )
  return data
}

// 使用 defaultOptions 将默认查询函数提供给您的应用
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryFn: defaultQueryFn,
    },
  },
})

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

// 您现在需要做的就是传递一个键！
function Posts() {
  const { status, data, error, isFetching } = useQuery({ queryKey: ['/posts'] })

  // ...
}

// 您甚至可以省略 queryFn，直接进入选项
function Post({ postId }) {
  const { status, data, error, isFetching } = useQuery({
    queryKey: [`/posts/${postId}`],
    enabled: !!postId,
  })

  // ...
}

// 定义一个将接收查询键的默认查询函数
const defaultQueryFn = async ({ queryKey }) => {
  const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
  )
  return data
}

// 使用 defaultOptions 将默认查询函数提供给您的应用
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryFn: defaultQueryFn,
    },
  },
})

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

// 您现在需要做的就是传递一个键！
function Posts() {
  const { status, data, error, isFetching } = useQuery({ queryKey: ['/posts'] })

  // ...
}

// 您甚至可以省略 queryFn，直接进入选项
function Post({ postId }) {
  const { status, data, error, isFetching } = useQuery({
    queryKey: [`/posts/${postId}`],
    enabled: !!postId,
  })

  // ...
}

如果您想覆盖默认的 queryFn，只需像通常那样提供您自己的 queryFn 即可。