react-query fetching 스켈레톤 오류

Question

react-query의 isFetching 값을 사용해서 데이터를 fetching 할 때 스켈레톤을 보여주려고 하는데요, 제가 의도하지 않은 타이밍에도 스켈레톤이 뜹니다. 이미 데이터가 한 번 로딩된 이후에도 다시 스켈레톤이 표시됐다가 데이터가 불러와지는데 왜 그런지 아시는 분 계실까요?

이은재 · Answer

안녕하세요. react query에서 isFetching은 캐싱된 데이터가 있고 데이터를 refetching 하는 경우에도 값이 true 입니다. 그래서 이미 데이터가 표시되고 있더라도 해당 데이터를 refetching 하게 되면 스켈레톤이 보일 수 있을 것 같아요.

isLoading은 캐싱된 데이터가 없이 fetching 할 때만 값이 true이기 때문에 isLoading을 대신 사용하시면 말씀하신 문제는 발생하지 않을 것 같습니다. 실제로도 스켈레톤 표시에는 isLoading값을 주로 쓰는 걸로 알고있어요.