Platzhalter-Query-Daten

Platzhalter-Daten ermöglichen einer Abfrage, sich so zu verhalten, als ob sie bereits Daten hätte, ähnlich wie die Option initialData, aber die Daten werden nicht im Cache gespeichert. Dies ist nützlich für Situationen, in denen Sie genügend partielle (oder gefälschte) Daten haben, um die Abfrage erfolgreich darzustellen, während die tatsächlichen Daten im Hintergrund abgerufen werden.

Beispiel: Eine Abfrage für einen einzelnen Blogbeitrag könnte "Vorschaudaten" aus einer übergeordneten Liste von Blogbeiträgen abrufen, die nur Titel und einen kleinen Ausschnitt des Beitrags enthalten. Sie möchten diese partiellen Daten nicht im Abfrageergebnis der einzelnen Abfrage speichern, aber sie sind nützlich, um das Inhaltslayout so schnell wie möglich anzuzeigen, während die tatsächliche Abfrage abgeschlossen wird, um das vollständige Objekt abzurufen.

Es gibt verschiedene Möglichkeiten, Platzhalter-Daten für eine Abfrage im Cache bereitzustellen, bevor Sie sie benötigen

• Deklarativ
  • Stellen Sie placeholderData einer Abfrage zur Verfügung, um ihren Cache vorab zu befüllen, falls er leer ist
• Imperativ
  • Rufen Sie die Daten mit queryClient und der Option placeholderData vorab ab oder rufen Sie sie ab

Wenn wir placeholderData verwenden, befindet sich unsere Abfrage nicht in einem schwebenden Zustand – sie beginnt im Erfolgszustand, da wir Daten zum Anzeigen haben – auch wenn diese Daten nur "Platzhalter"-Daten sind. Um sie von "echten" Daten zu unterscheiden, wird das Flag isPlaceholderData im Abfrageergebnis auf true gesetzt.

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

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

placeholderData kann auch eine Funktion sein, bei der Sie Zugriff auf die Daten und Meta-Informationen einer "vorherigen" erfolgreichen Abfrage erhalten. Dies ist nützlich in Situationen, in denen Sie die Daten aus einer Abfrage als Platzhalterdaten für eine andere Abfrage verwenden möchten. Wenn sich die QueryKey ändert, z. B. von ['todos', 1] zu ['todos', 2], können wir weiterhin "alte" Daten anzeigen, anstatt einen Ladespinner anzeigen zu müssen, während die Daten von einer Abfrage zur nächsten *übergehen*. Weitere Informationen finden Sie unter Paginated Queries.

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

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

Unter bestimmten Umständen können Sie die Platzhalter-Daten für eine Abfrage aus dem gecachten Ergebnis einer anderen bereitstellen. Ein gutes Beispiel hierfür wäre das Durchsuchen von gecachten Daten aus einer Blogbeitragslistenabfrage nach einer Vorschauversion des Beitrags und die Verwendung dieser Daten als Platzhalterdaten für Ihre individuelle Beitragsabfrage.

export class BlogPostComponent {
  // Until Angular supports signal-based inputs, we have to set a signal
  @Input({ required: true, alias: 'postId' })
  set _postId(value: number) {
    this.postId.set(value)
  }
  postId = signal(0)
  queryClient = inject(QueryClient)

  result = 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 queryClient
        .getQueryData(['blogPosts'])
        ?.find((d) => d.id === this.postId())
    },
  }))
}

export class BlogPostComponent {
  // Until Angular supports signal-based inputs, we have to set a signal
  @Input({ required: true, alias: 'postId' })
  set _postId(value: number) {
    this.postId.set(value)
  }
  postId = signal(0)
  queryClient = inject(QueryClient)

  result = 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 queryClient
        .getQueryData(['blogPosts'])
        ?.find((d) => d.id === this.postId())
    },
  }))
}