각 컴포넌트에 대해 개별 loading indicator
을 사용하는 대신 중앙 집중식 loading indicator
를 사용하도록 update 해보자.
=> hook인 useIsFetching
을 활용하자.
useQuery
반환 객체에서 isFetching
을 사용Loading spinner
를 표시해야함. 중앙 집중식 loading spinner
가 앱 component의 일부가 된다. 가져오는 query가 있으면 이 기능을 켜고, 가져오는 query가 없으면 이 기능을 끈다.useIsFetching
은 현재 가져오는 query가 있는지 알려주는 마법의 hook ! 즉, 각 custom hook에 대해 isFetching
을 사용할 필요가 없다는 뜻. useIsFetching의 값
은 spinner를 표시할지 여부를 알려준다. loading 컴포넌트에서 useIsFetching
사용!
useIsFetching
훅을 import 한다.
useIsFetching 은 현재 가져오기 상태인 query 호출의 수를 나타내는 정수를 반환한다. number
loading spinner
가 표시됨.
로딩 스피너 => fetch 됨.
창을 클릭하는데 왜 바로 load될까? 이것은 react-query가 제공하는 refetch configuration
이다. : 창에 focus 하면 data를 다시 가져옴.
query 오류가 발생할 때마다 toast message를 표시하는 global callback
을 만들어보자.