[TIL] useQuery_skip) 초기 검색 값 노출 에러_Part.3

🧑🏻‍🏫 Intro

Debounce와 useLazyQuery라는 개념을 이용해 render가 됐을때,
초기 데이터를 호출하는 것은 막아냈지만, 데이터가 나올때 깜박임 현상과
무한 스크롤을 이용하기 위해 사용했던 refetch에도 에러가 생겨 다시 처음으로 돌아왔다.

useLazyQuery를 조금 더 공부하면 될 수도 있었겠지만,
시간이 없었던 관계로 다른 방법을 더 연구해봤다.

🧑🏻‍💻 과정

누가 그랬는데..
개발은 완벽한 코드를 짜는 것이 아닌 버그를 잡아가는 일이라고...ㅜ

벌써 버그만 잡기위해 같은 코드를 들여다 본지도 어언 5일째다...허허
늘어가는건 주석처리고 늘어가는건 구글 검색 목록 뿐이었다...

그러던 중 빛과 같은 stackoverflow를 발견해 버렸다.

useQuery에서 skip이라는 option이 있는데 공식문서에서 skip의 내용을 보니
If true, the query is not executed. Not available with useLazyQuery.
라는 문구가 적혀있었다...!

바로 코드에 적용해 봤다.

💥 code

  const { data, refetch } = useQuery(GET_SEARCH_RESULT, {
    variables: {
      offset: 0,
      limit: 10,
      keyword: debounceValue,
    },
    skip: debounceValue === '',
  });

useQuery를 사용해서

📌 결과

검색어가 입력 될 때마다 해당 데이터가 호출되는 것은 막았지만
render가 되자마자 호출이 되어서 초기 데이터가 들어오는 것은 막을 수 없었다..

백엔드에게 검색어가 '' 값일때, 데이터를 안주는 로직으로 변경해주면 안되냐고 했지만
프론트에서 ''일때 요청을 막는게 더 빠를 것 같다고 해서 다른 방법을 찾아봐야한다...

참고 블로그

• 그저 빛.. stackoverflow..