[TIL] React-query mutation 이후 refetch가 필요할때,

오늘 배운것

ract-query에서는 요청을 보내고 새로운 데이터를 받아올때 어떻게 해야할까?

mutataion을 수행한 이후,변경된 데이터를 화면에 보여줘야하는 상황이 자주 있는데.

예를들면 북마크거나 이미지 또는 로고를 변경하는 등 많은 상황에서 변경된 데이터값으로 화면에 띄어줘야하고

이를 위해서는 데이터를 refetch하여 최신화해주어야 한다.

react-query를 통해 refetch할 수 있는 방법을 몇가지 확인했다.

 

1. useQuery refetch 활용

react-query는 데이터 가져오기를 담당하는 키와 함수를 사용하는 useQuery 라는 훅이 사용가능하며

useQuery라는 후크를 가져옴. 다음과 같이 사용할 수 있다.

 const { isLoading, isSuccess, data, refetch } = useQuery(Fn)
 
 ...
 
 mutate(
      {},
      {
        onSuccess: () => {
        refetch()
        },
      }

2.queryClient 선언후 필요한 키값의 캐시 초기화

 

const queryClient = useQueryClient();

mutate({body:blah},{
 onSuccess: ()=> {
          queryClient.invalidateQueries('startup');
        },
})

 

https://mui.com/materhttps://react-query.tanstack.com/reference/useQuery

Input API - Material UI

https://react-query.tanstack.com/reference/QueryClient

QueryClient