Skip to content

Commit 6a9edbf

Browse files
docs(angular-query): update queryOptions documentation (#8311)
* docs(angular-query): update queryOptions documentation * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 77b5f3a commit 6a9edbf

File tree

1 file changed

+23
-10
lines changed

1 file changed

+23
-10
lines changed

docs/framework/angular/guides/query-options.md

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,36 @@ ref: docs/framework/react/guides/query-options.md
99
```ts
1010
import { queryOptions } from '@tanstack/angular-query-experimental'
1111

12-
groupOptions = (id: number) => {
13-
return () =>
14-
queryOptions({
15-
queryKey: ['groups', id],
16-
queryFn: () => fetchGroups(id),
17-
staleTime: 5 * 1000,
12+
@Injectable({
13+
providedIn: 'root',
14+
})
15+
export class QueriesService {
16+
private http = inject(HttpClient)
17+
18+
post(postId: number) {
19+
return queryOptions({
20+
queryKey: ['post', postId],
21+
queryFn: () => {
22+
return lastValueFrom(
23+
this.http.get<Post>(
24+
`https://jsonplaceholder.typicode.com/posts/${postId}`,
25+
),
26+
)
27+
},
1828
})
29+
}
1930
}
2031

2132
// usage:
2233

23-
injectQuery(groupOptions(1))
34+
queries = inject(QueriesService)
35+
36+
injectQuery(this.queries.post(1))
2437
injectQueries({
25-
queries: [groupOptions(1), groupOptions(2)],
38+
queries: [this.queries.post(1), this.queries.post(2)],
2639
})
27-
queryClient.prefetchQuery(groupOptions(23))
28-
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
40+
queryClient.prefetchQuery(this.queries.post(23))
41+
queryClient.setQueryData(this.queries.post(42).queryKey, newGroups)
2942
```
3043

3144
[//]: # 'Example1'

0 commit comments

Comments
 (0)