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.

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

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

Wenn der Prozess zum Zugriff auf die Platzhalter-Daten einer Abfrage aufwendig ist oder Sie ihn nicht bei jedem Rendern ausführen möchten, können Sie den Wert memoïzieren

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

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

placeholderData kann auch eine Funktion sein, über die Sie Zugriff auf die Daten und Metainformationen einer "vorherigen" erfolgreichen Abfrage erhalten. Dies ist nützlich für Situationen, in denen Sie die Daten aus 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 Lade-Spinner 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.

function Todo({ blogPostId }) {
  const queryClient = useQueryClient()
  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)
    },
  })
}

function Todo({ blogPostId }) {
  const queryClient = useQueryClient()
  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)
    },
  })
}

Für einen Vergleich zwischen Platzhalter-Daten und Initial-Daten werfen Sie einen Blick auf die Community-Ressourcen.