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.

const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  placeholderData: placeholderTodos,
})

const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  placeholderData: placeholderTodos,
})

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

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

const result = useQuery({
  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.

const result = useQuery({
  queryKey: ['blogPost', blogPostId],
  queryFn: () => fetch(`/blogPosts/${blogPostId}`),
  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 === blogPostId)
  },
})

const result = useQuery({
  queryKey: ['blogPost', blogPostId],
  queryFn: () => fetch(`/blogPosts/${blogPostId}`),
  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 === blogPostId)
  },
})