본문으로 건너뛰기

쿼리 함수

쿼리 함수는 말 그대로 Promise를 반환하는 모든 함수가 될 수 있습니다. 반환된 Promise는 데이터를 이행하거나 오류를 발생시켜야 합니다.

성공 시 이행된 값은 **undefined**를 제외한 무엇이든 될 수 있습니다. undefined로 이행되는 쿼리는 실패한 것으로 처리됩니다. 쿼리 캐시에 "아무것도 없음"을 성공한 결과로 저장하려면 대신 null로 이행하세요.

다음은 모두 유효한 쿼리 함수 구성입니다:

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가 쿼리에서 오류가 발생했다고 판단하려면 쿼리 함수가 오류를 발생시켜야 하거나 거부된 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 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,
  })
}

// Access the key, status and page variables in your query function!
function fetchTodoList({ queryKey }) {
  const [_key, { status, page }] = queryKey
  return new Promise()
}

QueryFunctionContext​

QueryFunctionContext는 각 쿼리 함수에 전달되는 객체입니다. 다음으로 구성됩니다:

  • queryKey: QueryKey: 쿼리 키
  • client: QueryClient: QueryClient
  • signal?: AbortSignal
  • meta: Record<string, unknown> | undefined
    • 쿼리에 관한 추가 정보를 입력할 수 있는 선택적 필드

또한 무한 쿼리에는 다음 옵션이 전달됩니다:

  • pageParam: TPageParam
    • 현재 페이지를 가져오는 데 사용되는 페이지 매개변수
  • direction: 'forward' | 'backward'
    • 사용 중단됨
    • 현재 페이지 가져오기의 방향
    • 현재 페이지 가져오기 방향에 접근하려면 getNextPageParam 및 getPreviousPageParam에서 pageParam에 방향을 추가하세요.