enabled

쿼리가 자동으로 실행되지 않도록 설정할 수 있습니다.
보통 버튼 클릭이나 특정 이벤트를 통해 요청을 시도할 경우 같이 사용합니다.

• enabled : boolean
• false 설정하면 쿼리가 자동으로 실행되지 않습니다.
  • useQuery 반환 값 중 status가 pending 상태로 시작합니다.

enabled: false를 설정한 경우 queryClient가 쿼리를 다시 가져오는 방법 중
invalidateQueries 와 refetchQueries 를 무시합니다.

const getPosts = async () => {
  return await axios.get(`https://jsonplaceholder.typicode.com/posts`);
};

const usePosts = (enabled:boolean) => {
  return useQuery({
    queryKey: ["todo"],
    queryFn: getPosts,
    enabled: false,
  });
} 

const App = () => {
  const [enabled, setEnabled] = useState(false);
  const {data} = usePosts(enabled);
  const handleSearchPosts = () => {
	setEnabled(true);
  }

  return (
    <div>
      {data.map((body: string, idx: number) => (
        <div key={idx}>{body}</div>
      ))}
      <button onClick={handleSearchPosts}>조회하기</button>
    </div>
  );
}

select

• select : (data:TData) => unknown
• select 옵션을 사용하여 쿼리 함수에서 반환된 데이터의 일부를 변환하거나 선택할 수 있습니다.
• 반환된 데이터 값에는 영향을 주지만, 쿼리 캐시에 저장되는 내용에는 영향을 주지 않습니다.

const getPosts = async () => {
  return await axios.get(`https://jsonplaceholder.typicode.com/posts`);
};

const usePosts = () => {
	return useQuery({
      queryKey: ["todo"],
      queryFn: getPosts,
      select: (data) => {
          return data.map((post: Data) => post.body);
      },
    });
}

const App = () => {
  const data = usePosts();
  return (
    <div>
      {data.map((body: string, idx: number) => (
        <div key={idx}>{body}</div>
      ))}
      <button onClick={handleSearchPosts}>조회하기</button>
    </div>
  );
}

placeholderData

• placeholderData: TData | (previousValue: TData | undefined; previousQuery: Query | undefined,) => TData
• placeholderData를 설정하면 쿼리가 pending 상태인 동안 특정 쿼리에 대한 placeholder data로 사용됩니다.
• placeholderData는 캐시에 유지되지 않으며, 서버 데이터와 관계 없는 보여주기용 가짜 데이터입니다.
• placeholderData에 함수를 제공하는 경우
  • 첫 번째 인자로 이전에 관찰된 쿼리 데이터를 수신
  • 두 번째 인자는 이전 쿼리 인스턴스

const getPosts = async () => {
  return await axios.get(`https://jsonplaceholder.typicode.com/posts`);
};

const usePosts = () => {
  const placeholderData = useMemo(() => getPosts(), []);
	return useQuery({
      queryKey: ["todo"],
      queryFn: getPosts,
      placeholderData: placeholderData,
	});
}