[TroubleShooting] react query이용중 에러를 만나다.

영화 오픈api를 이용해서 혼자 솔로프로젝트를 하는중 에러를 마주했다.

 

근데 아직 더 많이 공부가 필요하다고 생각하는 react query부분이였다.

 

const { data, isLoading } = useQuery<IGetHOMETVResult>(
    ["hometv", "trending"],
    getHomeTv
  );

react query를 이용해서 home화면에서 쓰이는 tv 프로그램에 대한 정보는 호출해왔다.

 

이제 movie에 대한 정보를 가져오려고 코드를 적는중 에러를 마주했다.

 

 const { data2, isLoading2 } = useQuery<IGETHOMEMOVIEResult>(
    ["homemovie", "trending"],
    getHomeMovies
  );

이렇게 적어도 data2부분을 읽을수없다고 했다.

 

근데 생각해보니 저기의 data부분은 data:data를 축약한거 아닌가?

그래서 코드를 이런식으로 수정했다.

const { data: hometv, isLoading } = useQuery<IGetHOMETVResult>(
    ["hometv", "trending"],
    getHomeTv
  );
  const { data: homemovie } = useQuery<IGETHOMEMOVIEResult>(
    ["homemovie", "trending"],
    getHomeMovies
  );

그랬더니 console.log(homemovie)를 이용해 보니 잘 호출이 되었다.

 

다만 그전에 hometv부분을 data로 사용했던 부분에 대해서는 오류가 떠서 일단 hometv로 다 수정을 해두었지만, 일단 급한 불을 끈거고 hometv, homemovie 두부분에 대해서 다 적용이 되어야 하는부분은 수정을 해야한다.

 

이번 트러블 슈팅은 react query에서 여러개의 쿼리를 호출하는 경우 발생하는 부분에 대한 해결과 관련된 내용이었다.

정확히 말해선 자바스크립트 문제 같기는 하지만....