타입스크립트로 리액트쿼리 쓰는데, 컴포넌트에서 undefined 뜰 때

 

어제 서버 연결하는 코드를 useQuery를 사용해서 리팩토링을 하려고 하는데

데이터가 필요한 해당 페이지에서 자꾸 undefined가 떴었다.

 

get 에서는 분명 data가 잘 찍히는 걸 확인할 수 있는데, 이상하게 useQuery가 토해낸 data는 undefined가 떴었다.

이것저것 연구하다가 쿼리펑션에 then을 붙여서 response를 바로 state에 set하는식으로 할까도 했지만

const { data } = useQuery({
  queryKey: ["getPros1Data"],
  queryFn: () => {
    getPros1Data(urlReqCompanyName).then((response) =>
      setDataState(response)
    );
  },
});

사실 이렇게 코드를 자면 유즈쿼리를 쓴 이유가 없지 않나 생각했다. 

 

능력자 ㅈㅇ님이 마침 오셔서 (나의 스승님 >_<) 

연구를 해보는데 이것저것 하다가 발견하게 된 것은!!!!!!

 

이유 : 타입핑을 해주지 않았었기 때문!!(타입스크립트에서 사용하고 있으니까!!!!!!!!!)

 

이건 ㅈㅇ님이 인터페이스로 타입지정을 해주고, useQuery에다가 타입지정을 하는걸로 해결하신 코드

const usePropsQuery = () => {
  const [testData, setTestData] = useState({});
  const { data } = useQuery<RootObject>("temp", async () => {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    return data;
  });

이 코드를 예시로 참고해서

난 요런 인터페이스를 만들어서 코드 수정을 했다

interface ServerResponseType {
  company: string;
  [key: string]: number | string;
}

 

그렇게 해서 완성된 부분의 코드 ㅎㅅㅎ

import axios from "axios";

interface surverResponseType {
  company: string;
  [key: string]: number | string;
}

export const getPros1Data = async (urlReqCompanyName: string) => {
  const { data } = await axios.get(
    "https://jsonplaceholder.typicode.com/todos/1"
  );
  console.log("api의 data", data);
  return data;
};

 

 

 

 

import { useQueryClient, useQuery } from "react-query";
import { useEffect, useState } from "react";
import axios from "axios";

interface ServerResponseType {
  company: string;
  [key: string]: number | string;
}

const usePropsQuery = (urlReqCompanyName: string) => {
  const [sheetData, setSheetData] = useState({});
  const { data } = useQuery<ServerResponseType>("getPros1Data", async () => {
    const { data } = await axios.get(
      `https://sheet.best/api/sheets/96f08cd2-b20d-452a-8442-517f9353968f/company/${urlReqCompanyName}`
    );
    return data;
  });

  useEffect(() => {
    if (data) {
      setSheetData(data);
      console.log("data에 변화감지시 useEffect실행");
    }
  }, [data]);

  return { sheetData };
};

export default usePropsQuery;