React Query - Query invalidate

react query - 이제는 tanstack query- 에서는 데이터의 상태를 fetching -> fresh -> stale -> inactive -> delete 의 흐름으로 가지고 있습니다.

• fetching : 데이터 요청 상태.
• fresh : 데이터가 만료되지 않은 상태.(컴포넌트의 상태가 변경되어도 데이터를 다시 요청하지 않는다. 새로고침하면 다시 fetching.)
• stale : 데이터가 만료된 상태.( staleTime 기본값 0ms 가 지나면 fresh → stale 로 변경, 최신화가 필요한 데이터. 컴포넌트가 Mount, update 되면 데이터를 다시 요청)
• inactive : 사용하지 않는 상태.( cacheTime 기본값 5분이 지나면 Garbage Collector가 캐시에서 제거.)
• delete : Garbage Collector에 의해 캐시에서 제거된 상태.

stale 상태는 데이터가 만료된 상태로 refetch 대기 상태입니다. react query 는 아래와 같은 경우에 stale 데이터를 refetch 합니다.

• 새로운 query 인스턴스가 마운트될 때 (useQuery가 처음 호출될 때)
• 브라우저 화면을 이탈했다가 다시 포커스할 때
• 네트워크가 다시 연결될 때
• 특별히 설정한 refetch interval에 의해서 (refetchInterval)
• 추가적으로, 고의적으로 invalidate하여 refetching하는 것이 실전에서 자주 사용되는 편임. CUD가 이루어진 직후 새로운 데이터를 받아오기 위해 invalidate를 함. => 즉각 stale이 되어 refetching될 수 있음. (stale time 무시)
  • staleTime이 infinity여서 stale상태로 가지 않도록 설정한 경우, invalidate할 경우에만 refetch된다

stale 상태의 데이터들을 CUD 후에 업데이트하거나 로그아웃시에 이전의 query key 들의 구독을 끊어버릴 때 key들을 invalidate 하는 상황이 많았습니다.

• queryClient.resetQueries();
• queryClient.clear();
• queryClient.invalidateQueries()
• queryClient.removeQueries()

위의 네 가지 invalidate 방법을 비교하기 전에 isLoading 상태와 isFetching 상태를 비교해보면

isFetching

• 비동기 쿼리가 해결되지 않았음을 의미.

isLoading

• 가져오는 상태에 있음.
• initialData 와 표시할 캐시 데이터가 모두 없는 상태

queryClient.resetQueries()

• 캐시된 데이터를 모두 삭제하고 다시 요청한다.
• initialData 가 없는 상태에서 reset 을 하면 isLoading 상태에서 부터 다시 fetch 해서 데이터를 업데이트한다.

→ . If a query has initialData, the query's data will be reset to that.

clear() 와 removeQueries()

• clear() 는 모든 쿼리에 대해서 removeQueries() 시켜주는 것이다.
• remove는 모든 캐시데이터를 없애고 요청은 다시 보내지만 rerender 시키지는 않는다.
• refetch 후 rerendering 없이 invalidate 시키고 싶을 때 사용한다.
• rerender 시키면 캐시가 사라졌기 때문에 isLoading 상태부터 된다.

→  removes the query from the cache, but it doesn't re-render the page. So the data will stay on the screen. If the page re-renders for some other reason, it will go back to loading  state and start to fetch.

invalidateQueries() → 무효화

• 캐시된 데이터를 새로 fetch 된 데이터로 갈아끼운다. refetch 상태가 되고
• invalidate 하게 되면 isFetch 상태가 되고 받아오면 isFetch 가 false 가 된다. <br/>

아래에 직접 비교할 수 있는 codesandbox 를 첨부한다. https://codesandbox.io/s/react-query-invalidate-vs-reset-forked-m07g1p?file=/src/App.tsx