[TIL] Apollo_refetch) 무한 스크롤

🧑🏻‍🏫 Intro

지난번 Graphql과 Apollo를 활용해서 검색 기능을 구현하는 작업을 했다.
데이터를 불러오는 것 까지는 성공했으나, 초기 제한을 10으로 걸어버리는 바람에
데이터가 있는 부분의 스크롤을 내려도 해당 검색어와 일치하는 데이터들이
10개 밖에 보이지 않는 이슈가 생겼다.

🧑🏻‍💻 과정

끝이라고 생각했지만, 이제 시작이었다.

Apollo 공식문서 중 Result의 내용을 보면 refetch라고 하는 내용이 있다.
이름만 보면 다시 fetch를 해준다는 말인데,
내가 하려고 하는 기능이, 데이터 리스트가 담겨있는 부분에서
스크롤이 일정 조건에 맞게 되면 다시 데이터를 받는 로직을 구현하려고 했으니
이 refetch가 해당 조건에 맞게 동작할 수 있을것만 같은 이름을 갖고 있었다.

💥 code

  const checkScrollHeight = () => {
    const { scrollTop, scrollHeight, clientHeight } = scrollDivRef?.current;
    const limit = (Math.floor(searchResultData?.length / 10) + 1) * 10;

    if (scrollHeight - scrollTop <= clientHeight * 1.02) {
      refetch({ offset: 0, limit });
    }
  };

그래서 작성한 함수는 checkScrollHeight 라는 함수고,
height값을 계산해서 일정 조건에 부합하면 refetch를 해주는 로직이었고,
limit 값을 데이터 갯수를 이용해 계산해 변동 될 수 있도록 해주었다.

📌 결과

결과값은 순조롭게 작동했고, 무한 스크롤도 잘 작동 되었다.
이번에 refetch를 사용하면서 refetch를 쓸 때는, variables을 사용하지 않고
변화하는 조건만 넣어주면 되는구나~ 하는 것을 알게 되었다.

참고 문서

• Apollo 공식문서