tanstack-query-cache-trouble-shooting/

[utterances-bot]

InfinityQuery에서 fetch가 제대로 이루어지지 않는다?!?!

이 글은 우테코 피움팀 크루 '클린'가 작성했습니다. 문제: 무한 스크롤 시에 데이터 fetch가 제대로 이루어지지 않는다. 에러 구현 방법: 특정 식물 상세보기 접속 → 타임라인 페이지 접속 → 뒤로가기 → 해당 식물 정보 수정 → 타임라인 페이지 접속 서론 ‘피

https://pium-official.github.io/tanstack-query-cache-trouble-shooting/

[ChoiWonBeen]

글 잘 읽었습니다! 당황하셨을 법 한데 빠르게 이슈를 해결하셨네요 ㅎㅎ

다만 api캐싱을 위해 tanstack query를 data fetching 라이브러리로 선정하셨을테니(물론 isLoading, error 등의 반환값이나, suspense 활용을 위해서였을 수도 있지만) fetch할 때마다 캐싱을 하지 않게 하려면 어떻게 해야 하나? 보다는 어떻게 캐시를 제거할(보통은 무효화라고 하죠) 수 있을까?를 고려해보는것도 좋았을 것 같아요.

캐싱 기능을 유지하면서 POST, PUT등의 메소드가 실행될 때만 캐시를 지워준다면 장점만 활용할 수 있겠죠?

React Query의 공식문서의 두 파트를 참조해보시면 좋을 것 같아요.
Query Invalidation - 개념 설명
Invalidations From Mutations - 활용 예시
useMutation 훅을 활용해 해당 로직도 선언적으로 이쁘게 작성해보시길 추천드립니다 🙂

[hozzijeong]

헉...! Invalidations From Mutations 진짜 신박하네요... 처음 알았습니다...ㅎ 진짜 필요한 경우에만 캐시 무효화를 시키는게 너무 좋은 것 같습니다!! (공식문서 열심히 읽어봐야 겠네요 하하)

양질의 답글과 레퍼런스까지.. 너무 감사합니다 👍👍👍