[ReactQuery] useQuery vs useMutation

useQuery 공식문서

CRUD 중 Read시 주로 사용된다. 즉, 데이터 페칭을 목적으로 사용되며 Promise를 기반으로 하는 메서드들을 제공한다.

• QueryKey: Array
  쿼리를 식별하기위한 유일한 key
  이는 단순 배열, 값을 포함한 배열, 변수에 의존하는 배열 등의 형태를 가질 수 있다.
  (심화: query-key-factory)
• QueryFn
  실행할 함수
  Promise를 반환한다.

이를 통해 State(isLoading, isError, isSuccess ..), Data(data, error)등을 제공한다.

useMutation 공식문서

CRUD 중 Create, Update, Delete시 주로 사용된다.
(심화: 심화 개념)

• mutationFn
  실행할 함수
• helper options(onMutate, onSuccess, onError, onSettled..)
  각종 side-effects를 제어하기위한 옵션.
  이는 mutate를 호출할 때 추가로 정의(2)할 수 있는데, 기본으로 정의(1)된 option들이 먼저 동작한다.
• mutate vs mutateAsync
  mutate는 useMutation에서 사용되는 callback이며, void를 반환한다. mutation의 결과(success, error) Promise를 사용하기 위해서는 mutateAsync를 사용해야한다.