1. useQuery

React Query의 공식문서 및 리액트 네이티브를 다루는 기술의 주요 내용을 정리한 글입니다.

 

목차

useQuery란

쿼리는 비동기 요청 데이터에 대한 고유 키(Unique key)입니다.

보통 GET 요청에 사용되고, POST와 같이 서버의 데이터에 수정이 필요한 경우엔 Mutation을 사용합니다.

 

 

 

useQuery 기본 구조

캐시 키를 사용해 데이터를 캐시합니다.

한번 데이터를 받아온 뒤, 나중에 동일 요청시 데이터가 이미 존재시 기존에 있던 데이터를 바로 보여줍니다.

이때, 캐시 설정에 따라 데이터를 새로 불러오기도 합니다.

 

// useQuery 구조
useQuery(캐시 키, 프라미스 반환 함수, 캐싱option?)

 

 

 

useQuery Hook 반환 값

- status : API 요청 상태를 문자열로 보여줍니다.   - .loading : 현재 data가 없고, 데이터 요청 중   - .error : 오류 발생시   - .success : 데이터 요청 성공   - .idle : 비활성화된 상태 (따로 설정해 비활성화 한 경우) - isLoading - isError - isSuccess - isIdle - error : 오류 발생시, 오류 정보 - data: 요청 성공한 데이터 - isFetching : 데이터 요청중일때 True. (isLoading은 데이터 존재시 요청하면 false이지만, isFetching은 True)

 

 

 

useQuery의 options

useQuery의 3번째 파라미터의 option 객체를 통해 작동 방식을 설정할 수 있습니다.

- enabled   : boolean   : false면 컴포넌트가 마운트될때 자동으로 요청하지 않고 refetch 함수로만 요청이 시작됩니다.   : 보통, 특정 값 유무에 따른 요청 여부 결정할때 사용됩니다. (ex. enabled : !!user.id) - retry   : boolean | number | (failureCount: number, error: TError) => boolean   : true면, 요청 실패시 성공할때까지 계속 반복 요청합니다.   : false면, 요청 실패시 재요청하지 않습니다.   : 숫자면, 해당 숫자횟수까지만 재요청합니다.   : 함수타입이면, 실패 횟수와 오류 타입에 따라 재요청 여부를 함수에서 결정할 수 있습니다. - retryDelay   :  number | (retryAttempt: number, error: TError) => number   : 요청 실패후 재요청까지의 지연 시간을 설정합니다 (ms 기준)   : 기본 값은 실패 횟수 n에 따라 2^n 초후 재요청 (최대 30초까지 대기) - staleTime   : 데이터의 유효시간을 설정합니다 (ms 기준)   : 기본값은 0   : Infinity 로 설정시, 데이터는 만료되지 않습니다. - cacheTime   : 데이터의 캐시 시간을 설정합니다 (ms 기준)   : 컴포넌트가 언마운트 된후 해당 되이터를 얼마나 유지할지 결정합니다.   : 기본값은 5분입니다.   : 서로 다른 캐시 시간이 설정되면, 가장 긴 캐시 시간이 사용됩니다.   : Infinity 로 설정시, 가비지 컬렉팅 되지 않습니다. - refetchInterval   : number | false | ((data: TData | undefined, query: Query) => number | false)   : 주어진 n 초마다 데이터를 새로 불러옵니다. - refetchOnMount   : boolean | "always"   : 기본값은 True   : 컴포넌트가 마운트 될때 재요청 여부를 설정합니다.   : True면 data가 stale되었고 마운트 될때 불러오고, "always"는 data stale 여부와 상관없이 마운트되면 재요청해옵니다. - refetchOnWindowFocus   : boolean | "always"   : 윈도우가 focus 될때 재요청 여부를 설정합니다. - refetchOnReconnect - notifyOnChnageProps   : string[] | "tracked"   : 주어진 배열의 프로퍼티가 변경되었을때만 리렌더링을 수행합니다.   : 예를 들어, ['data', 'error'] 로 설정시, data와 error 프로퍼티가 변경되었을때만 리렌더링을 수행합니다   - notifyOnChnagePropsExclutions - onSuccess    : (data: TData) => void   : 데이터 요청이 성공하고나서 특정 함수를 호출하고 싶을때 사용합니다. - onError - onSettled   : 요청 성공여부와 상관없이 요청 끝난 후 특정 함수 호출하고 싶을때 사용합니다. - initialData   : TData | () => TData   : 사용할 데이터의 초기값을 설정합니다. 이 외에도 많으니 더보기

 

staleTime은 데이터의 유효시간을 의미하고, 0이되면 바로 유효하지 않음을 의미하고 재요청합니다.

(기본값 0이면, 조회하는 순간 유효하지 않음을 의미합니다)

cacheTime은 useQuery Hook을 사용한 컴포넌트가 언마운트된후 얼마나 유지할지를 의미합니다.

 

 

 

useQuery 기본 예제

1. 기본 api 요청 예제

쿼리에 대해 isLoading과 isError를 체크하는 것이 일반적입니다.

 

import { useQuery } from 'react-query'

function Todos() {
  // [ 다양한 useQuery 사용방법 ]
  // useQuery문 파라미터 : 고유 키, 데이터 혹은 에러를 반환하는 프라미스
  const info = useQuery('todos', fetchTodoList)
  const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)  
  const { status, data, error } = useQuery('todos', fetchTodoList)

  if (isLoading) { // status === 'loading'
    return <span>로딩중...</span>
  }
 
  if (isError) { // status === 'error'
    return <span>오류 발생: {error.message}</span>
  }
 
  // 이 시점에서 isSuccess === true 라고 볼 수 있습니다.
  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

 

 

2. 파라미터가 필요한 api 요청 예제

쿼리뿐만 아니라 파라미터를 포함해서 캐시가 설정됩니다.

(아래 예제의 경우 api뿐만 아니라 id도 동일해야 캐시가 적용됩니다)

 

import {useQuery} from 'react-query';

function getTodo(id) {
  const result = useQuery(['todo', id], () => fetchTodoItem(id));
}


// [파라미터 여러개일때]
// 파라미터의 순서는 상관없습니다.
// useQuery(['todos', {start: 0, limit: 10}], () => fetchTodoItems(start, limit));