[TIL] 20230717 - React Query Lifecycle, useQuery options 쿼리 옵션

React Query Lifecycle

queury가 stale하면 상한, 유통기한이 만료 되었다는 뜻, 그래서 데이터를 새로 받아오기위해 값을 요청한다.

fresh 상태는 새로 요청하지 않음

 

 

* default config (기본 설정)

기본설정	의미
staleTime: 0	useQuery 또는 useInfiniteQuery에 등록된 queryFn 을 통해 fetch 받아온 데이터는 항상 stale data 취급
refetchOnMount: true	useQuery 또는 useInfiniteQuery 가 있는 컴포넌트가 마운트 시 stale data 를 refetch 자동 실행
refetchOnWindowFocus: true	실행중인 브라우저 화면을 focus 할 때 마다 stale data를 refetch 자동 실행
refetchOnReconnect: true	Network 가 끊겼다가 재연결 되었을 때 stale data를 refetch 자동 실행
cacheTime: 5분
(1000 * 60 * 5 ms)	useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 언마운트 되었을 때 inactive query라 부르며, inactive 상태가 5분 경과 후 GC(가비지콜렉터)에 의해 cache data 삭제 처리
retry: 3	useQuery 또는 useInfiniteQuery에 등록된 queryFn 이 API 서버에 요청을 보내서 실패하더라도 바로 에러를 띄우지 않고 총 3번까지 재요청을 자동으로 시도

• staleTime : 얼마의 시간이 흐른 뒤에 stale 취급할 건지 (default: 0)
• cacheTime : inactive 된 이후로 메모리에 얼마만큼 있을건지 (default: 5분, cacheTime 0되면 삭제처리)

 

useQuery에서 자주 사용하는 must-know 옵션들

[ enabled ]

useQuery(["todos"], getTodos, { enabled: true })

• boolean type: true or false
• true인 경우에만 queryFn 실행
• enabled 옵션이 없을 경우, 기본값으로 true 로 생각하고 useQuery 자동실행됨.

예시코드 : Disabling/Pausing Queries (이벤트 발생 시에만 수동 실행하고 싶을 때)

const { data, refetch } = useQuery(["todos"], getTodos, {
  enabled: false
});

return (
	<div>
    <button onClick={() => refetch()}>데이터 불러오기</button>
  </div>
);

예시코드 : Dependent Queries (useQuery 2개 이상이며 실행순서 설정 필요할 때)

// Dependent Query 예제 (순차적 query 실행)
// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // The query will not execute until the userId exists
  enabled: !!userId
})
// 여기서 !!userId 는 Boolean(userId)와 같습니다.

[ select ]

queryFn 에 의해 리턴된 값을 변형시킨 후에 useQuery 의 리턴 data로 넘겨줌.

(단, cache data 는 queryFn 에서 리턴받은 값 그대로임)

import { useQuery } from 'react-query'

function User() {
  const { data } = useQuery(['user'], fetchUser, {
    select: (user) => user.username,
  })
  return <div>Username: {data}</div>
}