[React Query] 쿼리 함수 (queryFn)

 

 

1. queryFn

---

useQuery() 에서 쿼리 함수(queryFn)는 데이터를 가져오는 비동기 함수로 Promise 를 반환하는 어떤 함수라도 사용 가능하다.

단, 반드시 데이터 또는 오류를 반환해야 한다.

useQuery({ queryKey: ['libraries'], queryFn: () => fetchData() })
useQuery({ queryKey: ['libraries', id], queryFn: () => fetchDataById(id) })
useQuery({
	queryKey: ['libraries', id],
	queryFn: async () => {
		const data = await fetchDataById(id)
		return data
	},
})

 

 

2. 오류 처리

---

axios 나 graphql-request 같은 대부분의 유틸리티는 HTTP 호출에 대한 오류를 자동으로 던지지만, fetch 와 같은 일부 유틸리티는 기본적으로 오류를 던지지 않는다. 쿼리 함수(queryFn)는 오류를 반환해야 하기 때문에 직접 오류를 던져줘야 한다.

아래는 fetch API 를 사용한 예시이다.

useQuery({
    queryKey: ["libraries", id],
    queryFn: async () => {
    	const res = await fetch('/libraries/' + id);
        if (!response.ok) throw new Error("네트워크 응답이 정상이 아닙니다.");
        return respoinse.json();
    }
})

 

이렇게 반환되는 오류는 기본적으로 null 값을 가지고, 쿼리의 오류 상태에 유지되며 error 객체로 확인이 가능하다.