50 lines
1.1 KiB
Markdown
50 lines
1.1 KiB
Markdown
---
|
|
id: default-query-function
|
|
title: Default Query Function
|
|
ref: docs/framework/react/guides/default-query-function.md
|
|
---
|
|
|
|
[//]: # 'Example'
|
|
|
|
```ts
|
|
// Define a default query function that will receive the query key
|
|
const defaultQueryFn: QueryFunction = async ({ queryKey }) => {
|
|
const { data } = await axios.get(
|
|
`https://jsonplaceholder.typicode.com${queryKey[0]}`,
|
|
)
|
|
return data
|
|
}
|
|
|
|
// provide the default query function to your app with defaultOptions
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
queryFn: defaultQueryFn,
|
|
},
|
|
},
|
|
})
|
|
|
|
bootstrapApplication(MyAppComponent, {
|
|
providers: [provideTanStackQuery(queryClient)],
|
|
})
|
|
|
|
export class PostsComponent {
|
|
// All you have to do now is pass a key!
|
|
readonly postsQuery = injectQuery<Array<Post>>(() => ({
|
|
queryKey: ['/posts'],
|
|
}))
|
|
// ...
|
|
}
|
|
|
|
export class PostComponent {
|
|
// You can even leave out the queryFn and just go straight into options
|
|
readonly postQuery = injectQuery<Post>(() => ({
|
|
enabled: this.postIdSignal() > 0,
|
|
queryKey: [`/posts/${this.postIdSignal()}`],
|
|
}))
|
|
// ...
|
|
}
|
|
```
|
|
|
|
[//]: # 'Example'
|