如果你出于任何原因想在整个应用程序中共享同一个查询函数,并仅使用查询键来标识它应该获取什么,你可以通过为 TanStack Query 提供一个 默认查询函数 来实现。
// 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,
},
},
})
function App() {
return (
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
)
}
// All you have to do now is pass a key!
function Posts() {
const { status, data, error, isFetching } = useQuery(() => { queryKey: ['/posts'] })
// ...
}
// You can even leave out the queryFn and just go straight into options
function Post({ postId }) {
const { status, data, error, isFetching } = useQuery(() => {
queryKey: [`/posts/${postId}`],
enabled: !!postId,
})
// ...
}
// 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,
},
},
})
function App() {
return (
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
)
}
// All you have to do now is pass a key!
function Posts() {
const { status, data, error, isFetching } = useQuery(() => { queryKey: ['/posts'] })
// ...
}
// You can even leave out the queryFn and just go straight into options
function Post({ postId }) {
const { status, data, error, isFetching } = useQuery(() => {
queryKey: [`/posts/${postId}`],
enabled: !!postId,
})
// ...
}
如果您想覆盖默认的 queryFn,您只需像往常一样提供自己的查询函数即可。