[React] useQuery : 옵션 & 조건적 실행, Disabling/Pausing Queries, Dependent Queries, enable, select

 

 

💡 데이터를 바로 불러오는게 아니라 조건적으로 가져오기! 이벤트나 ~ 가져오는 순서나 ~

 

useQuery("key", getData, {option})

유즈쿼리의 세번째 인자로 옵션을 설정할 수 있다!

const { data, refetch } = useQuery(['todos'], getTodos, { enable: true });

 

enable 은 기본값이 true 여서 적지 않아도 true !

true 면 바로 실행해 데이터를 가져온다는 뜻이다.

 

 

그런데 자동으로 바로 데이터를 불러오는게 아니라

😲 사용자가 버튼을 눌렀거나 할 때 데이터를 가져오고싶다면?

Disabling/Pausing Queries

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

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

 

이런 식으로 refetch 를 실행 해 데이터를 불러올 수 있다.

 

😲 유즈쿼리가 2개 이상이고 실행 순서를 설정하고 싶다면?

Dependent Queries 의존하는.. 쿼리

const { data: user } = useQuery({ // 얘가 먼저 실행되야 userId 가 생긴다.
  queryKey: ['user', email],
  queryFn: getUserByEmail,
});

const userId = user?.id; // user 가 있으면 뒤 id 도 고려, user 가 거짓이면 바로 undefined

const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  enable: !!userId, // userId 가 참이면 getProjectsByUser 를 실행하겠다.
  // 여기서 !!userId 는 Boolean(userID) 와 같다.
});

 

👀 !!userId 같은 경우, 강제로 참 거짓으로 바꿔주는 로직이다.

if 문에서 !userId 가 가능한건 if 문 안에 불리언으로 바꿔주는 로직이 포함되어 있기 때문

 

💡 리턴된 값을 내 맘대로.. 변형시켜서 데이터로 넘겨주는 select

queryFn 에 의해 리턴된 값을 변형시킨 후에 useQuery 의 리턴 data 로 넘겨준다!

단, 캐시 데이타는 queryFn 에러 리턴받은 값 그대로다.

import { useQuery } from 'react-query';

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

 

여기서 fetchUser 가 바로 data 에 값을 넘기는게 아니라,

select 에서 user.username 을 data 로 넘긴다!