🧑🏻🏫 Intro
Debounce라는 개념을 통해서 검색어를 늦게 쿼리에 늦게 전달해
데이터를 검색어 입력 동작이 끝난 뒤, 데이터를 받아오는 것은 확인했지만
여전히 초기값이 들어와서 검색 데이터가 불러와지기도 전
검색결과 목록에 값이 나오는 것이 보여졌다.
Debounce라는 좋은 기능은 얻어갔지만, 내가 원하는 결과를 만들어내진 못했다.
🧑🏻💻 과정
이거 말고 다른 에러도 있고, 사실 그게 더 크리티컬한데...
먼저 시작한 김에 빨리 이걸 끝내버리려고 하다가
시간이 너무 지체돼 버렸다...
계속해서 삽질에 삽질을 거듭하던 중,
사수 개발자 (Thanks to ㅇㅇ)님의 팁으로 useLazyQuery에 대한 개념을 공부하게 됐다.
해당 개념은 useQuery와 동일한 느낌이지만 조금은 다르다.
useQuery는 render가 되자마자 바로 데이터를 호출하는 로직인데,
useLazyQuery는 함수를 통해서 내가 원하는 타이밍에 데이터를 호출할 수 있다.
💥 code
const [getData, { data, refetch }] = useLazyQuery(GET_SEARCH_RESULT);
useEffect(() => {
if (searchValue !== '') {
getData({
variables: { offset: 0, limit: 10, keyword: debounceValue },
});
}
}, [debounceValue]);getData라는 함수를 이용해서 useEffect안에서
검색어가 입력되지 않았을 때는 데이터를 호출하
원하는 데이터를 호출 할 수 있도록 해줬다.
이렇게 하니 처음 렌더가 됐을 때, 데이터를 불러오지 않는 것을 확인했고,
디바운스 된 검색어가 들어왔을 때, 데이터가 호출 되는 것을 확인했다.
📌 결과
결과론적으로 보면 이번 방법도 실패다..
처음에 데이터가 호출되지 않도록 하는 목표에는 도달했지만,
데이터가 호출 될때마다 데이터가 순간적으로 없어졌다가 다시 불러와져서
순간적으로 깜박이는 현상이 발생하는 것 처럼 보인다.
거기다가 refetch를 활용한 무한스크롤 기능도 작동하지 않았다.
useQuery와 useLazyQuery에서 refetch를 활용하는 방법이 달랐던 것 같다..
참고 블로그
