react query refetching

사이드프로젝트를 하면서 사용할까 했던 react useQuery의 refetching 옵션들에 대해 남겨볼까한다.
추후 유저가 새로고침이라던가 다른 탭에서 들어왔을 때의 데이터 등..을 위해 필요할 때 사용하기 위해 공부한 것을 정리해보면 아래와 같다.

우선 Refetch는 캐시가 만료가 되었을 때 일어난다. 그리고나서 필요한 옵션들을 추가함으로써 refetching 할 수 있다.

• refetchOnReconnect

    refetchOnReconnect : boolean | "always" | ((query : Query) => boolean | "always")

1. 네트워크가 다시 연결될 때
2. boolean 값인데 default는 true이다.
3. always 는 네트워크가 다시 연결될 때 캐시데이터의 만료여부와 상관없이 데이터를 리페칭한다.

• refetchOnWindowFocus

    refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")

1. 창이 다시 포커스 된 경우 (여러 탭을 갔다가 해당하는 탭에 들어왔을 때)
2. boolean 값인데 default는 true이다.
3. always는 해당 창이 다시 포커스가 될 때 캐시데이터의 만료여부와 상관없이 데이터를 리페칭한다.

• refetchOnMount

    refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")

1. 컴포넌트가 다시 마운트 되는 경우
2. boolean 값인데 default는 true이다.
3. always는 컴포넌트가 마운트가 됐을 때, 캐시데이터의 만료여부와 상관없이 데이터를 리페칭한다.

• refetchInterval

    refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false)

1. Interval로 정해진 시간마다 리페칭을 요청한 경우

정리하자면
refetchOnReconnect, refetchOnWindowFocus, refetchOnMount 는 boolean값인 반면에
refetchInterval는 ms초 단위의 시간이다.
그리고 이 옵션들은 useQuery에서 사용할 수 있다.
우선 구현에 필요한 옵션을 공부한 것은 이게 다 이며, 다음에 구현할 기회가 되면 이 옵션을 사용하는 방법과 예제를 통해서 정리를 해봐야겠다.