useQuery에 전달하는 인수

1. queryKey

쿼리의 고유한 식별자 역할을 하는 키

배열이나 문자열 형태로 전달되며, 데이터 캐싱, 리패칭 등을 제어하는 데 사용된다.

useQuery({
	queryKey: ['todos', userId],
});

2. queryFn

데이터를 가져오는 비동기 함수

이 함수는 서버에서 데이터를 가져오거나 처리하는 작업을 수행하고 Promise를 반환해야 한다.

const fetchTodos = async () => {
    const response = await fetch('/api/todos');
    return response.json();
};

useQuery({
	queryKey: ['todos', userId],
    queryFn: fetchTodos,
});

3. Option

쿼리의 동작 방식을 커스터마이징 하는 설정 객체

쿼리 데이터를 리패칭 할 타이밍이나 캐시 유지 시간 등을 설정할 수 있다.

• enabled: 쿼리를 자동으로 실행할지 여부
• staleTime: 데이터가 최신으로 유지되는 시간
• cacheTime: 데이터가 캐시에 유지되는 시간
• retry: 실패 시 재시도 횟수
• onSuccess: 성공 시 실행할 함수
• onError: 실패 시 실행할 함수

useQuery({
	queryKey: ['todos', userId],
    queryFn: fetchTodos,
    enabled: true,
    staleTime: 60000,
    cacheTime: 300000,
    retry: 3,
    onSuccess: data => {
    	console.log('Data fetched:', data);
    },
    onError: error => {
    	console.log('Error fetching data:', error);
    }
});

queryKey, queryFn, options를 useQuery의 인수로 전달하면 쿼리의 실행과 상태 관리를 세부적으로 제어할 수 있다.

---

useQuery가 반환하는 객체

• data: 가져온 데이터
• isPending: 백그라운드에서 쿼리를 가져오고 있는지 여부
• isLoading: 쿼리가 실행될 때 로딩 상태
  (쿼리가 비활성화 됐다고 해서 enabled가 true가 되지 않는다.)
• isError: 쿼리가 실패하여 에러가 발생했는지 여부
• error: 쿼리가 실패했을 때 발생하는 에러의 정보
• isSuccess: 쿼리가 성공적으로 완료되었는지 여부
• refetch: 데이터를 다시 가져오는 함수 제공
• status: 현재 쿼리의 상태를 나타내는 문자열(idle, loading, error, success)을 반환