React-query에 캐싱된 데이터 업데이트하기

요약

  import { useQueryClient } from 'react-query';
  
  const queryClient = useQueryClient();
  
  queryClient.setQueryData(["key"], (oldData: any) => {
    return [...oldData, id];
  });

setQueryData를 통해 key와 update 함수를 전달해주게되면 캐싱된 데이터를 변경할 수 있습니다.

 

개요

블로그 프로젝트를 진행하면서 게시글 스크랩 기능을 구현을 하였습니다. 단순히 스크랩 아이콘을 클릭했을 때 해당 블로그 아이디를 넘겨주어 진행되는 방식이었는데 스크랩 요청을 보낸 뒤의 상태를 React-query에서 관리하면서 캐싱된 데이터로 인해 최신값으로 변하지 않고 stale한 상태의 데이터로 인해 해당 포스트의 스크랩 상태가 정상적으로 표시되지않는 버그가 있었습니다

 

react-query 조건에 따라 refetch 구현

 

이후 스크랩 아이콘을 클릭했을 때 제대로 스크랩 됐는지 확인하고 최신 값을 가져오기 위해 invalidateQueries를 사용하여 해결한 뒤 정리하였습니다.

 

문제 해결 과정

하지만 스크랩 됐을 때마다 2번의 요청이 왔다가는 방식이 서버 비용, 성능 관련 문제가 발생되기 때문에 스크랩하는데 필수적인 스크랩 요청을 제외하고 프론트에서 최신 데이터를 캐시에 유지하기 위해 react-query에서 관리하는 캐시 데이터에 접근하면 해결 할 수 있겠다는 생각을 하게 되었고 이후 QueryClient에 여러 기능이 있다는 것을 확인하였습니다

 

QueryClient | TanStack Query Docs

 

이후 setQueryData라는 것이 있다는 것을 알고 사용하여 해결하게 되었습니다.

 

회고

구글링을 잘 못했던건지 해결방식을 찾는데 조금 걸리게 되었고 이후 공식문서를 통해 확인하게 되었습니다. 추가적으로 react-query문서를 쭉 읽어보면서 정말 많은 기능들이 있다는 것을 알게되었고 이렇게 문제를 해결하면서 배우는 방식이 가장 나은거같다는 생각을 갖게 되었습니다