1. 문제점

회사 프로젝트에는 repository 리스트를 서버로부터 불러와서 보여주는 페이지가 있다. 유저는 해당 페이지에 있는 repository들을 CRUD(create, update, read, delete)할 수 있다.

여기서 문제가 있는데 repository 리스트를 페이지 전환 때 마다 fetching하는 문제가 생겼다.

repository 리스트는 create, update, delete 하는 경우를 제외하고는 새롭게 refetching할 필요는 없다. (변화가 없기 때문) 따라서 create, delete (update는 아직 미구현)하는 경우에만 새로운 data를 fetching하고 단순 조회하는 경우엔 처음 페이지에 접속했을 때만 데이터를 fetching하고 추후 다시 repository 리스트 페이지에 접속해도 서버로부터 데이터 refetching 하는 것을 막는게 필요했다.

2. 데이터를 fetching하는 Query

 const { isLoading, isError, data, refetch } = useQuery({
    queryKey: ['repos'],
    queryFn: getRepositoryList,
    retry: false,
  });

수정 전의 useQuery로 데이터를 시도때도 없이 받아온다 ⇒ 서버비도 시도때도 없이 나간다.

이제 쓸데없는 data fetching을 줄여서 서버비를 아껴보자

기본적으로 useQuery에 option을 사용하지 않으면

• refetchOnMount값은 true (언마운트 되었다가 마운트 될 때 data를 fetching, 화면이 없어졌다가 다시 해당 화면이 나올 때 데이터를 다시 불러온다는 뜻)
• refetchOnWindowFocus값도 true (사용자가 다른 탭이나 다른 사이트를 보다가 커서로 해당 페이지를 활성화시킬때 data를 fetching)

일단 이것부터 다 막아서 쓸 때 없이 data fetching하는 것을 막아보자

const { isLoading, isError, data, refetch } = useQuery({
    queryKey: ['repos'],
    queryFn: getRepositoryList,
    retry: false,
    refetchOnMount: false,
    refetchOnWindowFocus: false, // browser창이 포커스 받을 때 자동으로 리패칭되는 것 방지
  });

이렇게 refetchOnMount와 refetchOnWindowFocus 둘 다 false값으로 두면 데이터의 새로운 fetching을 막을 수 있다.

하지만 이렇게만 처리하는 경우 문제가 생기는데, 최신 데이터로 업데이트가 안된다.