AxiosResponse[T]에러

에러 메세지

No overload matches this call.
Overload 1 of 3, '(queryKey: QueryKey, options?: Omit<UseQueryOptions<Review_Data[], unknown, Review_Data[], QueryKey>, "queryKey"> | undefined): UseQueryResult<...>', gave the following error.
Type '() => Promise<AxiosResponse<any, any>>' has no properties in common with type 'Omit<UseQueryOptions<Review_Data[], unknown, Review_Data[], QueryKey>, "queryKey">'.
Overload 2 of 3, '(queryKey: QueryKey, queryFn: QueryFunction<Review_Data[], QueryKey>, options?: Omit<UseQueryOptions<Review_Data[], unknown, Review_Data[], QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult<...>', gave the following error.
Argument of type '() => Promise<AxiosResponse<any, any>>' is not assignable to parameter of type 'QueryFunction<Review_Data[], QueryKey>'.
Type 'Promise<AxiosResponse<any, any>>' is not assignable to type 'Review_Data[] | Promise<Review_Data[]>'.
Type 'Promise<AxiosResponse<any, any>>' is not assignable to type 'Promise<Review_Data[]>'.
Type 'AxiosResponse<any, any>' is missing the following properties from type 'Review_Data[]': length, pop, push, concat, and 35 more.

에러 발생한 이유

• 타입스크립트가 axios.get 메서드의 반환 형식을 제대로 해석하지 못해서 발생!!!
• axios.get의 반환 형식은 AxiosResponse<T>. 하지만 여기서는 해당 응답의 data 속성만 필요하므로, 이를 명시적으로 지정해주어야 한다.
  

수정 전 코드

import { useQuery } from "react-query";
import axios from "axios";

const Reviews = () => {
  const { data, isLoading, isError, error } = useQuery<Review_Data[]>(
    "reviewData",
    () => {
      return axios.get("백엔드 api");
    }
  );
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>{error.message}</div>;
  }
  return(
    //data 나오는 부분
  )
};
export default Reviews;

수정 후 코드

import { useQuery } from "react-query";
import axios, { AxiosResponse } from "axios";

interface Review_Data {
  id: string;
  perform_id: string;
  content: string;
  rate: number;
  member_id: number;
  created_at: string;
  modified_at: string;
}

const Reviews = () => {
  const { data, isLoading, isError, error } = useQuery<Review_Data[]>(
    "reviewData",
    async () => {
      const response: AxiosResponse<Review_Data[]> = await axios.get("백엔드 api");
      return response.data;
    }
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>{error?.message}</div>;
  }

  return (
    //data 나오는 부분 
};

export default Reviews;