TIL 230328 useQuery와 useMutation

useQuery

useQuery는 주로 GET으로 데이터를 받아올 때 사용하고 data, isLoading, Error 속성이 있는 객체를 반환한다. 처음으로 특정 데이터를 받아와 캐싱할 때 사용한다. data는 통신을 하고 난 뒤 받게 되는 데이터를 말한다.

const {data, isLoading, Error} = useQuery('queryKey', queryFN, [options])

 

useMutation

useMutation는 POST, DELETE를 사용해 수정, 삭제와 같이 서버 데이터를 변경할 때 사용한다. mutate 함수를 사용할 수 있다.

const {mutate} = useMutation(queryFN, options)
mutate(parameter)

이렇게 사용할 수도 있다. 이때 parameter는 queryFN에서 통신에 필요한 데이터로 들어가게 된다.

const mutation = useMutation(queryFN, options)

mutation.mutate(parameter)

 

통신이 성공했을 때 refetch하고 싶다면 onSuccess 옵션에서 QueryClient에 접근해 invalidationQueries에 queryKey값을 넣어 특정 캐싱데이터를 refetch하게 할 수도 있다.

const queryClient = useQueryClient()
const mutation = useMutation(queryFN,{
  onSuccess: () => queryClient.invalidationQueries(queryKey)
})

 

useQuery나 useMutation을 통해 커스텀 훅을 만들어 사용할 수 있다

---

오늘도 chatGPT한테 열심히 물어가면서 공부를 하기는 했는데 서버가 없어서 useMutation을 정확히 파악하지 못했다. 대충 node서버를 하나 만들어서 해봐야 할까 보다...🥲