File tree Expand file tree Collapse file tree 1 file changed +23
-10
lines changed
docs/framework/angular/guides Expand file tree Collapse file tree 1 file changed +23
-10
lines changed Original file line number Diff line number Diff line change @@ -9,23 +9,36 @@ ref: docs/framework/react/guides/query-options.md
9
9
``` ts
10
10
import { queryOptions } from ' @tanstack/angular-query-experimental'
11
11
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
+ },
18
28
})
29
+ }
19
30
}
20
31
21
32
// usage:
22
33
23
- injectQuery (groupOptions (1 ))
34
+ queries = inject (QueriesService )
35
+
36
+ injectQuery (this .queries .post (1 ))
24
37
injectQueries ({
25
- queries: [groupOptions (1 ), groupOptions (2 )],
38
+ queries: [this . queries . post (1 ), this . queries . post (2 )],
26
39
})
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 )
29
42
```
30
43
31
44
[ // ] : # ' Example1 '
You can’t perform that action at this time.
0 commit comments