[TanStack Query] useQuery() 옵션 - enabled, select

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
  })
});