쿼리 함수

쿼리 함수는 Promise를 반환하는 어떤 함수든 될 수 있습니다. Promise는 데이터를 이행하거나 오류를 발생시켜야 합니다.

createQueryController(this, {
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

createQueryController(this, () => ({
  queryKey: ['todo', this.todoId],
  queryFn: () => fetchTodo(this.todoId),
}))

오류 처리

TanStack Query를 사용하려면 실패한 쿼리 함수가 오류를 발생시키거나 거부된 Promise를 반환해야 합니다. 일부 클라이언트는 이를 자동으로 처리합니다. 브라우저 fetch API는 그렇게 하지 않으므로 response.ok를 직접 확인하세요:

async function fetchTodos(): Promise<Todo[]> {
  const response = await fetch('/api/todos')

  if (!response.ok) {
    throw new Error('Failed to fetch todos')
  }

  return response.json() as Promise<Todo[]>
}

발생한 오류는 쿼리 결과에서 확인할 수 있습니다:

const query = this.todos()

if (query.isError) {
  return html`Error: ${query.error.message}`
}

쿼리 함수 컨텍스트

TanStack Query는 모든 쿼리 함수에 컨텍스트 객체를 전달합니다. 이 객체에는 다음이 포함됩니다:

• queryKey: 현재 쿼리 키
• client: QueryClient
• signal: 취소를 위한 AbortSignal
• meta: 선택적 쿼리 메타데이터

createQueryController(this, {
  queryKey: ['todos', { status: 'open' }],
  queryFn: async ({ queryKey, signal }) => {
    const [, filters] = queryKey
    const response = await fetch(`/api/todos?status=${filters.status}`, {
      signal,
    })
    if (!response.ok) throw new Error('Failed to fetch todos')
    return response.json() as Promise<Todo[]>
  },
})

무한 쿼리 함수는 pageParam도 받습니다:

createInfiniteQueryController(this, {
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
  initialPageParam: 1,
  getNextPageParam: (lastPage) =>
    lastPage.hasMore ? lastPage.page + 1 : undefined,
})

컨트롤러별 동작은 무한 쿼리를 참조하세요.