react-query 기본 사용법

이름은 알고 있었지만 회사에 입사하면서 처음 써본 기술스택이라 공식문서를 읽어보게 되었다. 다 읽지는 못했지만 읽어본 만큼 정리해본다.

react-query

concept

기존의 상태 관리 라이브러리는 클라이언트의 상태를 관리하기에는 적합했지만 서버의 상태 관리하는데는 적합하지 않았다. 하지만 react-query는 아래의 문제를 해결하며 서버의 상태 관리를 지원한다.

• 캐싱
• 백그라운드의 오래된 데이터 업데이트
• 동일한 요청 중복 제거
• pagination, 지연 로딩같은 성능 최적화

useQuery

component, hook에서 query를 구독할 때 사용함

function Component(){
	const info = useQuery({queryKey : ["key"], queryFn : fetchSomething})

	return //...
}

• queryKey : 쿼리의 캐싱을 관리하는 기준이 됨

• queryFn : Promise를 반환하는 함수

• useQuery가 반환한 결과에 포함된 것들
  - isLoading : 쿼리에 데이터가 아직 없음

  • isError : 쿼리에 오류가 발생함
  • iSuccess : 쿼리 성공, 데이텉 사용 가능
  • error : 에러 발생시 확인 가능
  • data : 쿼리 성공시 데이터 사용
  • isFetching : 어떤 상태에서든지 쿼리가 작동 하는 경우
  • status : isLoading, isError, isSuccess를 status 하나로 표현 가능

mutations

서버의 상태를 변경하는 query에 사용 (데이터 생성, 수정, 삭제)

사용법은 useQuery와 비슷함

• mutation의 lice cycle의 각 단계를 돕는 otpion들

useMutation({
  mutationFn: addTodo,
  onMutate: (variables) => {        
    //mutationFn 실행전에, addTodo에 전달되는 매개변수가 똑같이 전달됨
    return { id: 1 }
  },
  onError: (error, variables, context) => {
	  //error 발생시
  },
  onSuccess: (data, variables, context) => {
    // mutation 성공
  },
  onSettled: (data, error, variables, context) => {
    // 에러가 나거나 안나거나 상관없이 무조건 실행됨
  }
})

• mutationAsync
  - mutation이 Promise를 반환하게 할때 사용

• retry

const mutation = useMutation({
  mutationFn: addTodo,
  retry: 3,
})

query invalidate

react query에서 오래된 데이터를 최신화 해주지만 서버의 상태를 변경하는 작업을 하면 기존의 캐싱된 데이터들은 최신화가 필요하게 됨 (데이터 생성시 추가된 데이터까지 새로 조회해야함)

QueryClient의 invalidateQueries로 의도적으로 데이터를 업데이트 할 수 있도록 지원함

// 캐시의 모든 쿼리를 다 무효화 (업데이트)
queryClient.invalidateQueries()

// 'todos'로 시작하는 모든 쿼리 무효화
queryClient.invalidateQueries({ queryKey: ['todos'] })

위의 예제처럼 queryKey를 이용해 원하는 쿼리만 업데이트 시킬 수 있다.