[tanstack query] 쿼리키가 변경될 때 리페치 막기

요구사항

1. 리스트를 조회하는 페이지에서 데이터를 필터링하는 옵션 항목들이 있고 옵션 선택 후 조회버튼을 클릭했을 때 데이터를 조회해야 한다.
2. 상세페이지에서 리스트 페이지로 돌아왔을 때 이전항목들이 남아있어야 한다.

• 필터링 옵션들을 쿼리키로 지정.
• 리스트 페이지로 돌아왔을 때 이전항목들이 남아있게 하기위해 로컬스토리지에 이전 옵션을 저장하고 다시 돌아왔을 때 로컬스토리지에서 값을 가져와 쿼리키를 만들어 이전 쿼리를 리페치

문제점

옵션을 선택할 때마다 쿼리키가 변경되어 데이터가 리페치됨.

1. enabled옵션을 설정하기

옵션이 선택될 때만 enabled옵션을 false로 지정하고 조회버튼을 누를 때 enabled를 true로 변경.

• enabled옵션이 false여도 쿼리키의 변경이 감지되면 리페칭됨.

2. queryClient.fetchQuery를 사용해 명시적인 액션을 발생시키기

fetchQuery는 직접적으로 데이터를 가져오는 함수이다. 이 함수 자체도 리액트 컴포넌트의 상태나 프로퍼티를 변경하지 않으므로, 화면을 자동으로 업데이트하지 않는다.

• 쿼리키가 변경될때는 리페치되지 않는것 확인.
• invalidateQueries를 실행시 화면이 갱신되지 않음.
  

invalidateQueries와 화면 업데이트

• invalidateQueries 함수는 새로운 데이터를 가져오도록 쿼리를 무효화한다. 즉, 쿼리가 다시 실행되어 새로운 데이터를 가져와서 캐시에 저장한다. 하지만 이 함수 호출 자체는 리액트 컴포넌트의 상태나 프로퍼티를 변경하지 않기 때문에 직접적으로 리렌더링을 유발하지 않는다.
• 따라서 invalidateQueries를 호출했을 때 화면이 갱신되기 위해서는, 컴포넌트의 상태나 프로퍼티가 변경되어 리액트가 자동으로 리렌더링을 수행해야 함.
• fetchQuery 와 invalidateQueries 를 함께 사용할 때 화면이 갱신되는 경우는 컴포넌트의 상태 변경을 통해 리렌더링이 발생할 때이다. 아니면 마운트시 자동 리페치 할 수 있는 useQuery 훅을 사용해야 한다.

화면이 갱신되려면 리액트의 리렌더링 규칙에 따라 컴포넌트의 상태나 프로퍼티가 변경되거나 useQuery를 사용하여 자동으로 데이터를 관리하고 화면을 갱신하는 것이 일반적인 방법임.

3. useQuery의 기본 옵션(staleTime, refetchOnMount)을 사용

다시 useQuery를 사용 + enabled옵션에는 변수를 지정해 옵션이 변경될 때 enabled가 false로 유지되도록 했다.(enabled: isEnabled) 조회버튼을 클릭할 때 refetch를 실행.

staleTime, refetchOnMount옵션을 지정해 페이지가 다시 마운트될 때 리페치 함.

staleTime
staleTime은 쿼리 데이터가 캐시에서 만료되기까지의 시간을 의미한다. 기본값으로 설정된 경우, 일정 시간이 지나면 캐시된 데이터가 만료되고, 다음에 해당 쿼리가 실행될 때 새로운 데이터를 가져온다.

💡 staleTime을 지정할 때는 보수적으로 값을 지정해야 한다. staleTime에 지정된 시간동안은 새로운 데이터를 페칭하지 않고 캐싱된 데이터를 가져오기 때문에 업데이트가 빈번하게 일어나는 경우에는 지정하는 시간을 잘 생각해서 설정해야 한다. 나는 데이터의 변경이 잦지 않고 조회만 일어나기 때문에 새로 업데이트를 신경쓰지 않고 필터링된 데이터가 항상 유지되어야 하므로 staleTime을 길게 지정했다.

refetchOnMount

refetchOnMount가 기본값인 true로 설정되어 있으면, 컴포넌트가 처음 마운트될 때마다 자동으로 쿼리를 다시 실행한다. 이 때 staleTime이 설정되어 있다면, 만료된 캐시에 대해서는 새로운 데이터를 요청한다.

invalidateQuries와 비교

invalidateQueries를 사용하면 명시적으로 캐시를 무효화하고 새로운 데이터를 가져오기 때문에 항상 서버에 요청이 발생.

반면 staleTime과 refetchOnMount 설정은 캐시된 데이터를 유지하다가 필요할 때만 서버에 요청을 보내기 때문에, 필요에 따라 서버 요청의 발생 여부를 조절할 수 있다.

• 이 경우 enabled초기값을 false일 때 refetchOnMount보다 enalbed옵션이 우선시되어 페이지 이동 후 돌아왔을 때 refetchOnMount가 작동하지 않아 enabled에 지정된 변수의 초기값은 true여야한다.
• 하지만 리스트페이지에 처음 진입시에도 데이터가 조회 되므로(사이드 메뉴를 클릭해서 라우팅된 경우는 리스트가 비워져 있어야 함) 로컬스토리지에 진입 페이지인 경우와 진입 → 상세페이지로 이동한 경우를 구별할 수 있는 값을 저장했다.
• useEffect에서 로컬스토리지 값을 가져오게하고 진입 페이지인 경우 isEnabled값이 false가 되도록 변경해주었다.