React-Query 알아보기(3)

오늘은 저번시간에 마무리하지 못한 React-Query의 options에 대해서 알아보도록 하자.
이 options들을 얼마나 잘 이용하냐에 따라 React-Query를 얼마나 효율적으로 사용하는지가 결정 되는것 같다.

Options

• queryKey
  이건 저번시간에도 했지만, 그냥 useQuery의 인자로도 넣을 수 있다.
  string 또는 string 배열이 들어가고, string이 들어간다면 교유한 key값으로 사용되고 string 배열이 들어간다면 첫번째 요소는 key값으로 두번째 요소는 queryFn에 넘겨줄 parameter로 사용된다. 사실 두 요소 모두 paramter로 쓰일수 있어서 key값에 url을 많이 넣는 경우도 많다.

• queryFn
  이것도 이미 살펴본것 useQuery나 useMutation의 인자로 넣어도 무방하다.
  실제로 Api를 불러오는 Promise 함수를 넣으면 된다.
  ex)

export const fetData = async () => {
    const url = `http://localhost:4000`;

    const res = await axios({
        method: "get",
        url,
    });

    return res.data;
};

• enabled : 'boolean'
  enabled값을 이용해서 동기적으로 useQuery를 실행시킬수 있다.
  boolean 값이 false가 되면 자동으로 실행된다.

• networkMode : 'online' | 'always' | 'offlineFirst'
  networkMode는 컴퓨터에 네트워크가 연결되지 않았을때 어떻게 동작하는지를 결정합니다.
  'online' : 네트워크가 online일때만 동작합니다.(default)
  'always' : 네트워크가 연결되거나 연결되지 않아도 동작합니다.
  'offlineFirst' : 위의 두 모드의 중간 모드, query를 처음 한번만 시도하고 재시도를 하지 않는다.

• retry: 'boolean' | 'number' | (failureCount: number, error: TError) => boolean
  retry는 query가 실패한 후 재 실행 한것인지에 대한 option이다.
  'false'이면 재실행하지 않고, 'true'이면 재실행 한다.
  'number'는 재실행 할 횟수를 지정한다.

• retryOnMount: 'boolean'
  retry랑 비슷한 동작을 한다.
  'false'이면 query가 실패시 재 동작하지 않는다.

• retryDelay: 'number' | (retryAttempt: number, error: TError) => number
  retryDelay는 재실행을 진행 할 지연시간을 제공한다.
  단위는 ms이고, 설정하면 지정한 시간 후에 재시도가 실행된다.

• staleTime: 'number' | 'Infinity'
  staleTime은 사용자가 게속해서 홈페이지에 머물시 일정 시간후에 query를 재실행 하도록한다.
  주로 expired token 체크를 하기위해서 많이 사용된다.
  default 값은 0이다.

• cacheTime: 'number' | 'Infinity'
  cacheTime은 브라우저에 저장된 캐쉬를 얼느정도의 시간동안 저장할지를 지정한다.
  만약 0이라면 캐쉬를 저장하지않고 늘 새로운 데이터를 불러온다.
  default 값은 5 * 60 * 1000 5분이다.

• queryKeyHashFn: (queryKey: QueryKey) => string
  queryKeyHashFn은 queryFn과 같은 동작을 하지만 parameter로 들어가는 queryKey가 Hash되어서 들어가게 된다.
  좀더 보안에 신경쓴 option인것 같다.

• refetchInterval: 'number' | 'false' | ((data: TData | undefined, query: Query) => number | false)
  refetchinterval은 staleTime과 비슷하게 동작한다.
  특정 시간 이후에 다시 값을 가져올지를 결정하는 option이다.
  단위는 ms이다.

• refetchIntervalInBackground: 'boolean'
  refetchIntervalInBackground은 refetchInterval이 설정된 창/탭이 백그라운드에 가서도 재실행 할지는 결정하는 option이다.
  'true'로 설정하면 창/탭이 백그라운에(다른 창을 이용할때)서도 재실행을 한다.

• refetchOnMount: 'boolean' | "always" | ((query: Query) => boolean | "always")
  refetchOnMount는 화면이 마운트될때 쿼리를 재실행 할지 결정하는 option이다.
  'true'이면 데이터가 오래됬다면 다시 실행하고, 'false'이면 다시 가져오지 않는다.
  'always'이면 항상 마운트시 다시 가져온다.
  default 값은 'true'이다.

• refetchOnWindowFocus: 'boolean' | "always" | ((query: Query) => boolean | "always")
  refetchOnWindowFocus은 다른 창이나 화면으로 갔다가 다시 돌아왔을때 쿼리를 다시 실행 할지 결정하는 option이다.
  'true'이면 데이터가 오래됬다면 다시 실행하고, 'false'이면 다시 가져오지 않는다.
  'always'이면 항상 다시 가져온다.
  default 값은 'true'이다.

• refetchOnReconnect: 'boolean' | "always" | ((query: Query) => boolean | "always")
  refetchOnReconnect은 네트워크에 재연결 되었을때 쿼리를 재실행 할지 결정하느 option이다.
  사용법은 위의 두 option과 동일하다.

• notifyOnChangeProps: string[] | "all"
  notifyOnChangeProps은 지정된 속성 값이 변할때 컴포넌트를 재 렌더링 할지를 결정하는 option이다.
  ['data','error']로 지정하면 data가 변할 때, error가 변할 때 컴포넌트가 재 렌더링도니다.
  'all'은 모든 속성이 바뀔때마다 컴포넌트가 재 렌더링 된다.

• onSuccess: (data: TData) => void
  onSuccess는 쿼리가 성공했을때 실행되는 로직을 작성하는 option이다.

• onError: (error: TError) => void
  onError는 쿼리가 실패 했을때 실행되는 로직을 작성하는 option이다.
  단, react-query는 404일때만 error로 받아드린다.

• onSettled: (data?: TData, error?: TError) => void
  onSettled는 쿼리가 성공이든 실패든 무조건 실행되는 로직을 작성하는 option이다.
  Promise의 finally와 비슷한 기능을 하는것 같다.

• select: (data: TData) => unknown
  select는 return된 data를 변형하기 위해 사용되어진다.
  단, data를 바꾼다고 queryCache에 담긴 data는 바뀌지 않는다.
  그냥 onSuccess에서 해도 다르지 않을것 같긴하다..!

• suspense: 'boolean'
  React의 기능인 Suspense를 사용할지를 결정하는 option이다.
  굉장히 많이 쓰이지만, 굉장히 유념해서 사용해야한다..!
  default 값은 'false'이다.

• initialData: TData | () => TData
  initialData은 QueryCache에 초기 값을 넣기 위해 사용된다.
  이것을 잘 사용하면 네트워크에 연결하지 않아도 잘 동작하게 할 수 있다.

• initialDataUpdatedAt: number | (() => number | undefined)
  initialDataUpdatedAt은 QueryCache에 저장된 initialData를 어느정도의 시간이 지난 뒤에 update할지 결정하는 option이다.
  단위는 ms이다.

• placeholderData: TData | () => TData
  placeholderData는 query가 initialData가 없고 loading중 일때 들어가는 placeholderData를 넣기위한 option이다.
  plceholderData는 cache에 저장되는지는 않는다.

• keepPreviousData: boolean
  keepPreviousData는 query key가 변하여 data가 변할때까지 이전 데이터를 유지한다는 option이다.
  default 값은 'false'이다.

• isDataEqual: (oldData: TData | undefined, newData: TData) => boolean
  isDataEqual은 이전 데이터와 새로운 데이터를 비교하여 data가 변했는지 안변했는지를 알려주는 option이다.
  아래에 나올 structuralSharing option에서 함수로 사용될 수 있다.

• structuralSharing: boolean | ((oldData: TData | undefined, newData: TData) => TData)
  structuralSharing은 이전 데이터와 새로운 데이터의 구조가 다를때 유기적으로 결합 할 수 있도록 하는 함수이다.
  단, 'false'로 설정하면 결합 할 수 없다.

• useErrorBoundary: undefined | boolean | (error: TError, query: Query) => boolean
  useErrorBoundary은 suspense와 마찬가지로 errorBoundary를 사용하기 위한 option이다.
  errorBoundary는 error 발생시 노출시킬 컴포넌트를 지정하는 기능이다.

• meta: Record<string, unknown>
  meta는 QueryCache에 추가적인 정보를 저장하기 위해서 사용되는 option이다.
  주로 글로벌하게 쓰인다.

• context?: React.Context<QueryClient | undefined>
  React-Query는 서버 상태관리 라이브러리 이지만 클라이언트 상태도 같이 관리 할수 있다.
  그럴때 사용되는 option이다.

오늘은 React-Query의 options에 대해서 알아보았다.
너무 양이 많고 글 밖에 없어서 계속 미루다가 드디어 했다.
하지만 언젠가 도움이 되는 날이 오지 않을까 생각한다.