오늘은 react-query 적응기에 대한 게시물을 작성해볼까 한다.
이미 너덜너덜해진 콘솔창이지만,,,
무한 요청으로 생기는 오류는 더 이상 컴터가 버티지 못해,,☆
지금 하고 있는 작업은 'new york times'에서 제공하는 API로 클론코딩하기!
(여담이지만 API 사용 방법을 몰라서 정말 많은,,, 시행착오를 겪고 나서야 데이터를 받아올 수 있었다,,^___^)
구현이 필요한 기능은 무한 스크롤이었다.
useQuery를 한 번도 사용해본적이 없어서 굉장히!!! 많이!!!! 매우!!!! 걱정하고 있었는데,,
왜 나는 항상 오류를 몰고 다니는가,,, 한 번에 제대로 되는 걸 보질 모태,,
어른인 나는 울지 않고 문제를 해결해보고자 한다.
일단 tanStack > doc에 있는 useQuery 예시를 냅다 긁어와서 바꿔봤다.
우예~ 생각보다 넘 잘되잖아~~ 하고 신나서 UI 작업 및 그 외의 기능들을 다 끝내고
최종 보스인 무한 스크롤을 useInfiniteQuery로 구현하려고 했.는.데.
요청이 너무 많아서 실패했다는 error가 발생했다.
일단 말도 안되는 속도로 올라가는 콘솔 오류창에 심장이 쿵쾅쿵쾅 뛰기 시작했다.
빠른 속도로 차오르는 콘솔 오류창과는 다르게 스크롤은 10개 이상의 기사를 담아냈다고 하기에는 너무 잠잠했다,,
하나도 무섭지 않았지만, 무능한 주인 덕에 혹사 당하고 있는 내 컴퓨터를 위해 냅다 작업창을 꺼버렸다. ㅎ
콘솔 에러의 내용은 NYT API 호출 제안을 넘어섰다는 내용이었는데
공식 문서 QnA 11번 문항을 찾아보니,
일일요청 500개, 분당 요청 5개의 제한이 걸려있는데 나는 이 중 후자의 호출 제안에 걸려 에러가 발생했다.
호출 함수 작성에 필터 값을 추가하게 되면 무수히 많은 호출을 진행했던 것,,,
그래서 전체 기사 호출 함수와 필터된 기사 호출 함수를 분리해서 작성하게 되었다.
/* 전체 기사 호출 함수 */
const getDefaultPost = async (page: number = 0) => {
const url = `?page=${page}&sort=newest&api-key=${process.env.REACT_APP_API_KEY}`;
const response = await axios.get(`${url}`);
return response.data.response;
};
/* 필터된 기사 호출 함수 */
const getFilteredPost = async (
currentPage: 'Home' | 'Scrape',
page: number = 0
) => {
// 스토리지에 저장된 필터 값을 불러오기
const filter: filterProps | null | undefined = getFilter(currentPage);
// 가져온 필터 값을 적용시킨 api url 반환 함수에 넣어 url받아오기
const url = getAPIURL(filter?.q, filter?.period, filter?.glocations, page);
const response = await axios.get(`${url}`);
return response.data.response;
};
필터 값 유무에 따라 필요한 함수를 호출해주는 방식으로 수정했더니
너무너무 이쁘고 말끔하게 잘 돌아갔다 ㅎㅎ
행복한 개발 시간~~
이었다고 최면을 걸며 하루하루를 연명해갑니다,, ^^*
오늘도 구글링 중 만난 선생님들 덕분에 살아갑니다,,☆
선생님이 사람 한 명 구제했다고 생각하고
행복하게 살아가시길 진심으로 바랍니다 (∩^o^)⊃━☆
