Query Functions

쿼리 함수는 promise를 반환하는 모든 함수가 될 수 있다. 이 promise는 데이터를 reslove(성공적으로 처리)하거나 에러를 throw해야 한다.

 

다음은 모두 유효한 쿼리 함수 설정의 예시이다.

useQuery({ queryKey: ['todos'], queryFn: fetchAllTodos })
useQuery({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })
useQuery({
  queryKey: ['todos', todoId],
  queryFn: async () => {
     const data = await fetchTodoById(todoId)
     return data
   },
 })
 useQuery({
   queryKey: ['todos', todoId],
   queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
 })

 

에러 처리 및 발생시키기

Tanstack Query가 쿼리에서 에러가 발생했다고 인지하려면, 쿼리 함수는 반드시 에러를 throw하거나 거부된 Promise를 반환해야 한다. 쿼리 함수 내에서 발생한 모든 에러는 쿼리의 error 상태에 저장된다.

const { error } = useQuery({
  queryKey: ['todos', todoId],
  queryFn: async () => {
    if (somethingGoesWrong) {
      throw new Error('Oh no!')
    }
    if (somethingElseGoesWrong) {
      return Promise.reject(new Error('Oh no!'))
    }
    
    return data
  },
})

 

fetch와 같이 기본적으로 에러를 발생시키지 않는 클라이언트와 함께 사용하기

axios나 graphql-request 같은 라이브러리는 HTTP 호출이 실패하면 자동으로 에러를 발생시키지만, fetch와 같은 일부 유틸리티는 그렇지 않다. 예를 들어, fetch는 404나 500 에러가 발생해도 에러를 throw하지 않고 정상 응답을 반환한다.

 

이 경우, 직접 에러를 발생시켜야 한다. 다음은 fetch API를 사용할 때 이를 처리하는 간단한 방법이다.

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()
  },
})

 

쿼리 함수 변수

쿼리 키는 가져올 데이터를 고유하게 식별하는 용도뿐만 아니라, 쿼리 함수에 QueryFunctionContext의 일부로 편리하게 전달된다. 항상 필요한 것은 아니지만, 이 기능 덕분에 필요하다면 쿼리 함수를 외부로 분리하는 것이 가능해진다. 

function Todos({ status, page }) {
const result = useQuery({
  queryKey: ['todos', { status, page }],
  queryFn: fetchTodoList,
 })
}

// queryKey를 구조 분해 할당하여 status와 page 변수에 접근할 수 있다.
function fetchTodoList({ queryKey }) {
  const [_key, { status, page }] = queryKey // 첫 번째 요소는 무시하고, 두 번째 객체에서 status와 page를 추출
  return new Promise()
}

 

QueryFunctionContext

QueryFunctionContext는 각 쿼리 함수에 전달되는 객체이며, 다음과 같은 속성들을 포함한다. 

• queryKey: QueryKey
  • 쿼리를 식별하는 키이다.
• client: QueryClient
  • 현재 QueryClient의 인스턴스이다.
• signal?: AbortSignal
  • TanStack Query에서 제공하는 AbortSignal 인스턴스이다.
  • Query Cancellation에서 사용될 수 있다.
• meta: Record<string, unknown> | undefined
  • 쿼리에 대한 추가 정보를 담을 수 있는 선택적 필드이다.

또한, Infinite Queries에서는 다음 옵션들이 추가로 전달된다.

• PageParam: TPageParam
  • 현재 페이지를 가져오는 데 사용된 페이지 파라미터이다.
• direction: 'forward' | 'backward'
  • deprecated
  • 현재 페이지를 가져오는 방향에 접근하려면 getNextPageParam이나 getPreviousPageParam 함수에서 pageParam 객체에 direction 정보를 직접 추가해서 사용할 수 있다.

https://tanstack.com/query/latest/docs/framework/react/guides/query-functions

Query Functions | TanStack Query React Docs