如何在同一组件中两次使用自定义反应查询挂钩

Question

我有一个类似这样的自定义钩子，用于使用useQuery获取数据。挂钩很好用，没问题。

const getData = async (url) => { 
try{
return await axios(url) 
} catch(error){ 
console.log(error.message)
} 
}
export const useGetData = (url, onSuccess) => {
return useQuery('getData', () => getData(url), {onSuccess})
}

但是，如果我在组件中两次调用这个钩子，即使使用不同的URL，它也只能从第一次调用中获取数据。(忽略评论拼写错误，这是故意的(

我的组件中的调用：

const { data: commentss, isLoading: commentsIsLoading } = useGetData(`/comments/${params.id}`)
const { data: forumPost, isLoading: forumPostIsLoading } = useGetData(`/forum_posts/${params.id}`)

在这种情况下，当我console.log forumPost时，它是一组评论，而不是论坛帖子，即使我传递了一个不同的端点。

如何使用此钩子两次以获得不同的数据？有可能吗？我知道我可以直接调用并行查询，但如果可能的话，我想使用我的钩子。

Answer 1

由于useQuery基于queryKey进行缓存，因此使用名称中的URL

const getData = async(url) => {
try {
return await axios(url)
} catch (error) {
console.log(error.message)
}
}
export const useGetData = (url, onSuccess) => {
return useQuery('getData' + url, () => getData(url), {
onSuccess
})
}
//........
const {
data: commentss,
isLoading: commentsIsLoading
} = useGetData(`/comments/${params.id}`)
const {
data: forumPost,
isLoading: forumPostIsLoading
} = useGetData(`/forum_posts/${params.id}`)