译零 TransZero · TanStack Query v3 中文文档
主站

默认的查询函数 default-query-function

如果出于某种原因,您希望在整个应用中共享相同的查询功能,并且可以仅靠查询键值来标识应获取的内容。则可以通过重写 React Query 提供的默认查询函数来做到这一点:

JavaScript
1// 定义一个参数为查询键值的默认查询函数2// 假设这里的 queryKey 是一个数组3const defaultQueryFn = async ({ queryKey }) => {4  const { data } = await axios.get(5    `https://jsonplaceholder.typicode.com${queryKey[0]}`,6  );7  return data;8};9 10// 使用 defaultOptions 向您的应用提供默认查询函数11const queryClient = new QueryClient({12  defaultOptions: {13    queries: {14      queryFn: defaultQueryFn,15    },16  },17});18 19function App() {20  return (21    <QueryClientProvider client={queryClient}>22      <YourApp />23    </QueryClientProvider>24  );25}26 27// 现在,只需要传入一个键值就行了!28function Posts() {29  const { status, data, error, isFetching } = useQuery("/posts");30 31  // ...32}33 34// 你也可以传入一些参数35function Post({ postId }) {36  const { status, data, error, isFetching } = useQuery(`/posts/${postId}`, {37    enabled: !!postId,38  });39 40  // ...41}

如果您想覆盖默认的 queryFn,像平常一样提供一个函数即可。