upstream-tanstack-query/docs/framework/angular/guides/placeholder-query-data.md

id, title, ref

id	title	ref
placeholder-query-data	Placeholder Query Data	docs/framework/react/guides/placeholder-query-data.md

class TodosComponent {
  readonly todosQuery = injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: () => fetch('/todos'),
    placeholderData: placeholderTodos,
  }))
}

class TodosComponent {
  readonly todoQuery = injectQuery(() => ({
    queryKey: ['todos', id()],
    queryFn: () => fetch(`/todos/${id}`),
    placeholderData: (previousData, previousQuery) => previousData,
  }))
}

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())
    },
  }))
}