enabled
- 쿼리(queryFn) 실행 여부를 제어
- enabled: true => 기본값, 컴포넌트 렌더링 시점에 쿼리를 자동 실행
- enabled: false => 쿼리가 자동으로 실행되지 않음, 아래 사용예제 참고하기
1) 컴포넌트 렌더링 시점에 바로 서버 데이터를 불러오지 않고, 특정 이벤트가 발생했을 때 받아오고싶은 경우
const { data, refetch } = useQuery({
queryKey: ["todos"],
queryFn: getTodos,
enabled: false
});
return (
<div>
<button onClick={() => refetch()}>데이터 불러오기</button>
</div>
);
2) 순차적으로 의존적인 두개의 쿼리를 실행해야할 때
- 첫번째 쿼리(getUserByEmail)의 실행 결과가 두번째 쿼리(getProjectsByUser)의 실행 여부를 결정
- getUserByEmail: 사용자의 데이터를 가져옴, 쿼리 실행시 user에 사용자의 정보가 저장됨
- getProjectsByUser: userId가 존재할 때 enabled: true로 쿼리가 실행됨,
// 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,
// 쿼리는 userId가 존재하는 경우에만 실행돼요 :)
enabled: !!userId
})
// 여기서 !!userId 는 Boolean(userId)와 같습니다.
select
- 쿼리함수에서 반환된 데이터를 변형하여 사용할 수 있도록 함
- 데이터의 특정 부분만 선택하거나, 데이터를 변환하여 사용할 때 유용
- 단, 캐시데이터는 원본 데이터를 유지한다!!
1) 쿼리를 실행해 받아온 데이터 중 하나만 반환받아 사용하고 싶은 경우
- fetchUser로 받아온 사용자 정보 중 username만 선택하여 data에 저장
import { useQuery } from 'react-query'
function User() {
const { data } = useQuery({
queryKey: ["user"],
queryFn: fetchUser,
select: user => user.username
});
return <div>Username: {data}</div>
}
2) fetch한 데이터 중 일부를 사용하고 싶은 경우
- select로 여러 값이 담긴 객체를 지정해준다
- fetchUser가 가져온 user에서 user.username, user.email만 받아 각 키값에 지정하고 두 값을 담은 객체를 select하여 data에 저장
const { data } = useQuery({
queryKey: ["user"],
queryFn: fetchUser,
select: user => ({
username: user.username,
email: user.email
})
});
'React' 카테고리의 다른 글
[React/JS] 캐러셀 구현하기 (Tailwind) (0) | 2024.09.12 |
---|---|
[TanStack Query] Query Cancellation, Optimistic Updates (2) | 2024.09.07 |
UX 향상 기법 - Throttling & Debouncing, lodash (1) | 2024.09.06 |
[React] Zustand (0) | 2024.09.06 |
Tanstack Query 캐시데이터의 생명주기 (0) | 2024.09.05 |