React-query : refetchOnWindowFocus속성

react-query로 무한스크롤 리팩토링 중 발견한 현상.

창을 켜 놓은 채로 다른 인터넷창을 열거나 vscode로 이동했다가 돌아오면 코드수정도 없고 데이터에 아무런 변화가 없음에도 refetch되었다.

알고보니 Background Refetch라는 개념이 있었다.

Background Refetch

Background Refetch란 브라우저가 해당 캐시에 대한 데이터를 재요청하는 것으로 이를 통해 캐시가 항상 최신의 상태를 유지하도록 한다.

굳이 새로고침을 하지 않아도 캐시의 상태가 stale인 경우 window에 focus를 하면(인터넷 탭 이동 or 다른 앱 사용 후 창으로 되돌아오기) 자동으로 refetch가 실행되는 것이다.(= refetchOnWindowFocus)

refetchOnWindowFocus

• true(default)
• false
• always

세 가지 옵션이 있는데 react-query에서는 window에 focus시 데이터가 stale상태인 경우 자동으로 refetch되는 true가 기본값이다.

false로 바꾸면 창을 벗어나도 새로고침하지 않는 이상 refetch되지 않는다.

always는 문자 그대로 항상 refetch를 한다.(fresh 상태일 때도 refetch를 실행한다.)

---

// InfiniteQuery
const { isLoading, isError, error, fetchNextPage, hasNextPage } =
        useInfiniteQuery<any, Error>(
            ["infiniteRecipe", isBest],
            async ({ pageParam }) =>
                await (pageParam ? next(pageParam) : first()),
            {
                getNextPageParam: (querySnapshot) => {
                    const lastPageParam =
                        querySnapshot.docs[querySnapshot.docs.length - 1];
                    if (querySnapshot.size < 6) {
                        return undefined;
                    }
                    return lastPageParam;
                },
                refetchOnWindowFocus: false,
            }
        );

옵션값으로 추가해주었다.