React Query의 useInfiniteQuery에서 개별 항목을 무효화하는 방법 소개
React Query의 useInfiniteQuery 훅을 사용할 때, 특정 아이템을 무효화해야 하는 상황에 직면할 수 있습니다. 아이템의 수가 많은 리스트를 다룰 때, 한 개의 아이템을 변경하기 위해 전체 리스트를 다시 가져오는 것은 비효율적일 수 있으며 서버와 데이터가 동기화되지 않을 수 있습니다.
문제: React Query의 useInfiniteQuery에서 개별 아이템 무효화
실제 예시를 가정해봅시다. 사용자 목록이 있고 각 사용자에게 팔로우 버튼이 있습니다. 사용자가 팔로우 버튼을 누르면 서버로 팔로우한 사용자를 표시하는 별도의 요청이 이뤄집니다. 이 후에 해당 사용자의 팔로우 상태를 정확하게 반영해야 합니다.
가능한 접근 방법 중 하나는 queryClient.setQueryData를 사용하여 팔로우 요청 성공 후에 로컬 데이터를 업데이트하는 것입니다. 그러나 이 업데이트가 해당 멤버 데이터의 무효화와 가져오기를 따르지 않는다면, 오래된 로컬 데이터에 의존하게 되어 서버와 동기화되지 않을 수 있습니다.
가능한 해결책
현재 React Query는 무한 쿼리에서 개별 아이템을 직접 무효화하는 기능을 지원하지 않습니다. 이는 정규화된 캐싱과 기본 스키마의 부재 때문입니다. 그러나 몇 가지 해결책을 고려할 수 있습니다:
1. 쿼리 키에 접두사 추가
쿼리 키에 동일한 문자열을 접두사로 추가하면, 접두사가 일치하는 쿼리를 한 번에 여러 개 무효화할 수 있습니다. 예를 들면:
['users', 'all']
['users', 1]
['users', 2]
이 세 개의 쿼리를 모두 무효화하려면 다음과 같이 사용합니다:
queryClient.invalidateQueries(['users'])이 접근 방법은 여전히 전체 목록을 다시 가져와야 합니다.
2. 수동 데이터 조작
전체 목록을 다시 가져오지 않고도, setQueryData를 사용하여 특정 아이템의 데이터를 수동으로 업데이트할 수 있습니다. 백엔드와 동기화되지 않으려면 변경된 사용자의 완전한 상세 데이터를 돌려주어야 합니다. 이 접근 방법은 추가 처리가 필요하지만 데이터에 대한 더 정교한 제어를 가능케 합니다.
결론
결론적으로, React Query는 무한 쿼리에서 개별 아이템을 무효화하는 내장된 솔루션을 제공하지 않지만, 쿼리 키에 접두사를 추가하거나 데이터를 수동으로 조작하여 원하는 결과를 얻을 수 있습니다. 효율성과 서버와 데이터 동기화 사이의 트레이드오프를 고려하세요. 특정 사용 예제에 가장 적합한 해결 방법을 찾기 위해 이러한 접근 방법을 실험해보세요.
라이브러리에는 새로운 기능과 개선사항이 계속 도입되기 때문에 React Query 문서와 커뮤니티 토론을 계속해서 업데이트하도록 하세요.
참고 자료 :
같은 카테고리의 다른 글 보기 :
