[React Query] invalidateQueries

 

◼ InvalidataQueries 

useMutation을 이용해서 실제 DB에 값을 전달을 하였지만, 화면은 실시간으로 랜더링이 되지 않습니다.

그래서 같이 사용해야 하는 함수가 InvalidataQueries함수 입니다.

앞서 설명한 것 처럼 ReactQuery는 캐시(임시저장소)가 있으며, 그 관리를 스스로 합니다.
useMutation를 사용해서 DB에 데이터를 업데이트를 하였지만, Reat Query는 그 사실을 알지 못합니다.

그렇기 때문에 변경 되어서 다시 데이터를 가지고 올수 있도록 실행 시키는 함수입니다.

이 함수를 사용하면, 업로드를 하였을때 Reat Query가 인지하여, refetch를 하도록 설정할 수 있습니다.

 

실행 단계

Mutation 실행: useMutation 훅을 사용하여 데이터를 변경합니다. 이 단계에서 데이터베이스나 서버에서 데이터가 변경됩니다
캐시 무효화: onSuccess 콜백 함수에서 invalidateQueries를 호출하여 특정 쿼리를 무효화합니다. 이로 인해 React Query는 해당 쿼리의 데이터를 최신 상태로 다시 가져오게 됩니다.
데이터 재요청 및 캐시 업데이트: 쿼리가 무효화되면 React Query는 자동으로 해당 데이터를 다시 가져오고, 캐시를 최신 상태로 업데이트합니다. 이로 인해 UI도 최신 데이터로 갱신됩니다.