Prefetching

Wenn Sie Glück haben, wissen Sie genug darüber, was Ihre Benutzer tun werden, um die benötigten Daten vorab laden zu können, bevor sie benötigt werden! In diesem Fall können Sie die Methode prefetchQuery verwenden, um die Ergebnisse einer Abfrage vorab zu laden und im Cache zu speichern.

const prefetchTodos = async () => {
  // The results of this query will be cached like a normal query
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

const prefetchTodos = async () => {
  // The results of this query will be cached like a normal query
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

• Wenn bereits **frische** Daten für diese Abfrage im Cache vorhanden sind, werden die Daten nicht abgerufen.
• Wenn ein staleTime übergeben wird, z.B. prefetchQuery({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 }) und die Daten älter sind als die angegebene staleTime, wird die Abfrage abgerufen.
• Wenn keine Instanzen von useQuery für eine vorab geladene Abfrage erscheinen, wird diese nach der in gcTime angegebenen Zeit gelöscht und gesammelt.

Infinite Queries können wie reguläre Queries vorgefetcht werden. Standardmäßig wird nur die erste Seite der Query vorgefetcht und unter dem angegebenen QueryKey gespeichert. Wenn Sie mehr als eine Seite vorfetchen möchten, können Sie die Option pages verwenden, in diesem Fall müssen Sie auch eine getNextPageParam-Funktion angeben.

const prefetchProjects = async () => {
  // The results of this query will be cached like a normal query
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    pages: 3, // prefetch the first 3 pages
  })
}

const prefetchProjects = async () => {
  // The results of this query will be cached like a normal query
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    pages: 3, // prefetch the first 3 pages
  })
}

Der obige Code versucht, 3 Seiten nacheinander vorab zu laden, und getNextPageParam wird für jede Seite ausgeführt, um die nächste vorab zu ladende Seite zu bestimmen. Wenn getNextPageParam undefined zurückgibt, wird das Vorabladen gestoppt.