TanStackQuery (5) - Query Functions

 

쿼리 함수는 문자 그대로 약속을 반환하는 모든 함수가 될 수 있다.

반환되는 약속은 데이터를 해결하거나 오류를 throw 해야한다.

 

핸들링 및 throw 오류

TanStack Query가 쿼리에 오류가 발생했는지 확인하려면 쿼리 함수가 거부된 Promise를 throw하거나 반환해야 한다.

쿼리 함수에서 throw된 모든 오류는 쿼리의 오류 상태에 지속된다.

 

const { error } = useQuery({
	queryKey: ['todos', todoId],
    queryFn : async () => {
		if (somethingGoesWrong) {
        	throw new Error ("어랍숑?")
        }
        if (somethingElsetGoesWrong) {
        	return Promise.reject(new Error ("Oh no.."))
        }
        
        return data
     },
 })

 

기본적으로 throw 하지 않는 fetch 및 기타 클라이언트와 함께 사용

axios나 graphql-requery와 같은 대부분 유틸리티는 실패한 HTTP 호출에 대해 자동으로 오류를 발생시키지만

fetch와 같은 일부 유틸리티는 기본적으로 오류를 발생하지 않으므로 직접 발생시켜야 한다

useQuery({
	queryKey: ['todos', todoId],
    queryFn: async () => {
    	const response = await fetch('/todos/' + todoId)
        if (!response.ok) {
        	throw new Error ('Network response was not ok')
        }
        return response.json()
    }
})

 

쿼리 함수 변수

항상 필요한 것은 아니지만 가져오는 데이터를 고유하게 식별하기 위함

function fetchTodoList({ queryKey }) {
	const [_key, { status, page }] = queryKey
    return new Promise()
 }