💃 타입스크립트 공부
타입스크립트로 리액트쿼리 쓰는데, 컴포넌트에서 undefined 뜰 때
따따시
2023. 1. 22. 14:49
어제 서버 연결하는 코드를 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;