Query Functions
Eine Query-Funktion kann buchstäblich jede Funktion sein, die einen Promise zurückgibt. Der zurückgegebene Promise sollte entweder die Daten auflösen oder einen Fehler auslösen.
Alle folgenden Konfigurationen von Query-Funktionen sind gültig
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]),
})
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]),
})
Fehlerbehandlung und Auslösung von Fehlern
Damit TanStack Query eine Query als fehlerhaft erkennt, muss die Query-Funktion einen Fehler auslösen oder einen abgelehnten Promise zurückgeben. Jeder Fehler, der in der Query-Funktion ausgelöst wird, wird im error-Status der Query gespeichert.
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
},
})
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
},
})
Verwendung mit fetch und anderen Clients, die standardmäßig keine Fehler auslösen
Während die meisten Utilities wie axios oder graphql-request automatisch Fehler für nicht erfolgreiche HTTP-Aufrufe auslösen, lösen einige Utilities wie fetch standardmäßig keine Fehler aus. In diesem Fall müssen Sie sie selbst auslösen. Hier ist eine einfache Methode, dies mit der beliebten fetch API zu tun.
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()
},
})
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-Funktionsvariablen
Query Keys dienen nicht nur der eindeutigen Identifizierung der abgerufenen Daten, sondern werden auch praktisch als Teil des QueryFunctionContext an Ihre Query-Funktion übergeben. Obwohl nicht immer notwendig, macht dies die Extraktion Ihrer Query-Funktionen bei Bedarf möglich.
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()
}
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
Der QueryFunctionContext ist das Objekt, das an jede Query-Funktion übergeben wird. Er besteht aus:
- queryKey: QueryKey: Query Keys
- client: QueryClient: QueryClient
- signal?: AbortSignal
- Eine von TanStack Query bereitgestellte AbortSignal-Instanz.
- Kann für Query Cancellation verwendet werden
- meta: Record<string, unknown> | undefined
- Ein optionales Feld, das Sie mit zusätzlichen Informationen zu Ihrer Query füllen können.
Zusätzlich erhalten Infinite Queries die folgenden Optionen übergeben
- pageParam: TPageParam
- Der Seitenparameter, der zum Abrufen der aktuellen Seite verwendet wird.
- direction: 'forward' | 'backward'
- veraltet
- Die Richtung des aktuellen Seitenabrufs.
- Um Zugriff auf die Richtung des aktuellen Seitenabrufs zu erhalten, fügen Sie bitte eine Richtung zu pageParam von getNextPageParam und getPreviousPageParam hinzu.
