useQuery

useQuery는 query-key를 observe하고있는 observer로 해당 query-key에 관련된 cache가 변할경우 자동적으로 data를 업데이트한다.

queryClient

queryClient는 cache와 직접적으로 소통하기위해 사용되어 주로 아래와 같은 상황에 사용된다.

1. Invalidating queries : 특정 query를 invalidate해 data를 stale상태로 만들고, data refetching을 일으키고 싶은경우.
2. Refetching queries : 특정 query를 강제로 refetch하고 싶은경우.
3. Prefetching data : 필요한경우 data를 미리 가져오고 싶을때.
4. Clearing cache : 특정 쿼리를 제거하고싶은경우.
5. Setting query data : 수동으로 특정 캐시를 셋, 업데이트 하고싶은경우.

useMutation

useMutation은 side-effect를 목적으로 만들어져, mutation이 실행되도, useQuery처럼 자동으로 cache에 data를 저장하지않는다.
저장하고싶다면 수동으로 저장해줘야한다.(queryClietn.setQueryData)

결론

• useQuery는 컴포넌트단에서 data(cache)를 가져와 뿌려주고싶은경우 사용.(observer로써 data가 update될경우 자동으로 update하여 다시 뿌려짐)

• queryClient는 비지니즈 로직상 cache를 조작해야하는경우 사용.

• useMutation은 data를 업데이트(post, put, delete)하는 경우 사용하고, 이후의 data(response)를 이용해 cache를 업데이트하려면 수동으로 조작해줘야한다.