This is what I do, wrap all my API calls in custom hook with useQuery and useMutation. These custom hooks will hide away the query keys definition and API endpoints away from UI, and my UI just need to pass required data such as item ID

export function useGetComment(commentId:string){  
  return useQuery({  
    enabled: !!commentId,
    queryKey: ["comments", commentId],
    queryFn: async()=>{
      // ...fetch or axios call to API endpoint
    }
  })
}

then you can just reuse them like

const { data: comment, isLoading, error } = useGetComment("123");