[TanStakQuery] Query Functions

쿼리 함수는 말 그대로 프로미스를 리턴하는 모든 함수가 될 수 있습니다. 리턴되는 프로미스는 데이터를 해결하거나 오류를 발생시켜야 합니다.

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

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

오류 처리 및 던지기(Handling and Throwing Errors)

TanStack 쿼리에서 쿼리에 오류가 발생했다고 판단하려면 쿼리 함수가 rejected 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 사용(Usage with fetch and other clients that do not throw by default)

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

쿼리 함수 변수(Query Function Variables)

쿼리 키는 가져오는 데이터를 고유하게 식별하기 위한 것일 뿐만 아니라, 쿼리 함수에 쿼리 함수 컨텍스트의 일부로 편리하게 전달할 수도 있습니다. 항상 필요한 것은 아니지만, 필요한 경우 쿼리 함수를 추출할 수 있습니다:

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: Query Keys
• pageParam?: unknown
  • Infinite Queries에만 해당
  • 현재 페이지를 fetch하는 데 사용되는 페이지 파라미터입니다.
• signal?: AbortSignal
  • TanStack Query에서 제공되는 AbortSignal 인스턴스입니다.
  • Query Cancellation에 사용할 수 있습니다.
• meta: Record<string, unknown> | undefined
  • 쿼리에 대한 추가 정보로 채울 수 있는 선택적 필드입니다.

Reference

• Queriy Functions | TanStack Query Docs