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

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 时，它是评论数组而不是论坛 post，即使我传递的是不同的端点。

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

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}`)

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

How to use custom react query hook twice in the same component?

javascript

reactjs

react-hooks

react-query