Query Optionen
Einer der besten Wege, um queryKey und queryFn zwischen mehreren Stellen zu teilen und sie dennoch nahe beieinander zu halten, ist die Verwendung des queryOptions-Helfer. Zur Laufzeit gibt dieser Helfer einfach zurück, was Sie ihm übergeben, aber er bietet viele Vorteile, wenn Sie ihn mit TypeScript verwenden. Sie können alle möglichen Optionen für eine Query an einem Ort definieren und erhalten außerdem Typherleitung und Typsicherheit für alle davon.
ts
import { queryOptions } from '@tanstack/angular-query-experimental'
@Injectable({
providedIn: 'root',
})
export class QueriesService {
private http = inject(HttpClient)
post(postId: number) {
return queryOptions({
queryKey: ['post', postId],
queryFn: () => {
return lastValueFrom(
this.http.get<Post>(
`https://jsonplaceholder.typicode.com/posts/${postId}`,
),
)
},
})
}
}
// usage:
postId = input.required({
transform: numberAttribute,
})
queries = inject(QueriesService)
postQuery = injectQuery(() => this.queries.post(this.postId()))
queryClient.prefetchQuery(this.queries.post(23))
queryClient.setQueryData(this.queries.post(42).queryKey, newPost)
import { queryOptions } from '@tanstack/angular-query-experimental'
@Injectable({
providedIn: 'root',
})
export class QueriesService {
private http = inject(HttpClient)
post(postId: number) {
return queryOptions({
queryKey: ['post', postId],
queryFn: () => {
return lastValueFrom(
this.http.get<Post>(
`https://jsonplaceholder.typicode.com/posts/${postId}`,
),
)
},
})
}
}
// usage:
postId = input.required({
transform: numberAttribute,
})
queries = inject(QueriesService)
postQuery = injectQuery(() => this.queries.post(this.postId()))
queryClient.prefetchQuery(this.queries.post(23))
queryClient.setQueryData(this.queries.post(42).queryKey, newPost)
Für Infinite Queries steht ein separater infiniteQueryOptions-Helfer zur Verfügung.
Sie können einige Optionen immer noch auf Komponentenebene überschreiben. Ein sehr gängiges und nützliches Muster ist die Erstellung von pro-Komponente select-Funktionen
ts
// Type inference still works, so query.data will be the return type of select instead of queryFn
queries = inject(QueriesService)
query = injectQuery(() => ({
...groupOptions(1),
select: (data) => data.title,
}))
// Type inference still works, so query.data will be the return type of select instead of queryFn
queries = inject(QueriesService)
query = injectQuery(() => ({
...groupOptions(1),
select: (data) => data.title,
}))
