59 lines
1.3 KiB
Markdown
59 lines
1.3 KiB
Markdown
---
|
|
id: placeholder-query-data
|
|
title: Placeholder Query Data
|
|
ref: docs/framework/react/guides/placeholder-query-data.md
|
|
---
|
|
|
|
[//]: # 'ExampleValue'
|
|
|
|
```ts
|
|
class TodosComponent {
|
|
readonly todosQuery = injectQuery(() => ({
|
|
queryKey: ['todos'],
|
|
queryFn: () => fetch('/todos'),
|
|
placeholderData: placeholderTodos,
|
|
}))
|
|
}
|
|
```
|
|
|
|
[//]: # 'ExampleValue'
|
|
[//]: # 'Memoization'
|
|
[//]: # 'Memoization'
|
|
[//]: # 'ExampleFunction'
|
|
|
|
```ts
|
|
class TodosComponent {
|
|
readonly todoQuery = injectQuery(() => ({
|
|
queryKey: ['todos', id()],
|
|
queryFn: () => fetch(`/todos/${id}`),
|
|
placeholderData: (previousData, previousQuery) => previousData,
|
|
}))
|
|
}
|
|
```
|
|
|
|
[//]: # 'ExampleFunction'
|
|
[//]: # 'ExampleCache'
|
|
|
|
```ts
|
|
export class BlogPostComponent {
|
|
postId = input.required<number>()
|
|
readonly queryClient = inject(QueryClient)
|
|
|
|
readonly blogPostQuery = injectQuery(() => ({
|
|
queryKey: ['blogPost', this.postId()],
|
|
queryFn: () => fetch(`/blogPosts/${this.postId()}`),
|
|
placeholderData: () => {
|
|
// Use the smaller/preview version of the blogPost from the 'blogPosts'
|
|
// query as the placeholder data for this blogPost query
|
|
return this.queryClient
|
|
.getQueryData(['blogPosts'])
|
|
?.find((d) => d.id === this.postId())
|
|
},
|
|
}))
|
|
}
|
|
```
|
|
|
|
[//]: # 'ExampleCache'
|
|
[//]: # 'Materials'
|
|
[//]: # 'Materials'
|