useInfiniteQuery

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  promise,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  promise,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

Optionen

Die Optionen für useInfiniteQuery sind identisch mit dem useQuery Hook mit den folgenden Ergänzungen

• queryFn: (context: QueryFunctionContext) => Promise<TData>
  • Erforderlich, aber nur, wenn keine Standard-Query-Funktion definiert wurde defaultQueryFn
  • Die Funktion, die die Query zum Abrufen von Daten verwendet.
  • Empfängt einen QueryFunctionContext
  • Muss ein Promise zurückgeben, das entweder Daten auflöst oder einen Fehler auslöst.
• initialPageParam: TPageParam
  • Erforderlich
  • Der Standard-Seitenparameter, der beim Abrufen der ersten Seite verwendet wird.
• getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null
  • Erforderlich
  • Wenn für diese Abfrage neue Daten empfangen werden, erhält diese Funktion sowohl die letzte Seite der unendlichen Datenliste als auch das vollständige Array aller Seiten sowie Seitenparameter-Informationen.
  • Sie sollte eine einzelne Variable zurückgeben, die als letzter optionaler Parameter an Ihre Abfragefunktion übergeben wird.
  • Geben Sie undefined oder null zurück, um anzuzeigen, dass keine nächste Seite verfügbar ist.
• getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) => TPageParam | undefined | null
  • Wenn neue Daten für diese Query empfangen werden, erhält diese Funktion sowohl die erste Seite der unendlichen Datenliste als auch das vollständige Array aller Seiten sowie Seitenparameterinformationen.
  • Sie sollte eine einzelne Variable zurückgeben, die als letzter optionaler Parameter an Ihre Abfragefunktion übergeben wird.
  • Geben Sie undefined oder null zurück, um anzuzeigen, dass keine vorherige Seite verfügbar ist.
• maxPages: number | undefined
  • Die maximale Anzahl von Seiten, die in den Daten der unendlichen Query gespeichert werden.
  • Wenn die maximale Anzahl von Seiten erreicht ist, führt das Abrufen einer neuen Seite zum Entfernen der ersten oder letzten Seite aus dem Seitenarray, abhängig von der angegebenen Richtung.
  • Wenn undefined oder gleich 0, ist die Anzahl der Seiten unbegrenzt
  • Standardwert ist undefined
  • getNextPageParam und getPreviousPageParam müssen ordnungsgemäß definiert sein, wenn der maxPages Wert größer als 0 ist, um bei Bedarf das Abrufen einer Seite in beide Richtungen zu ermöglichen.

Gibt zurück

Die zurückgegebenen Eigenschaften für useInfiniteQuery sind identisch mit dem useQuery Hook, mit den folgenden zusätzlichen Eigenschaften und einem geringen Unterschied bei isRefetching und isRefetchError

• data.pages: TData[]
  • Array, das alle Seiten enthält.
• data.pageParams: unknown[]
  • Array, das alle Seitenparameter enthält.
• isFetchingNextPage: boolean
  • Ist true, während die nächste Seite mit fetchNextPage abgerufen wird.
• isFetchingPreviousPage: boolean
  • Ist true, während die vorherige Seite mit fetchPreviousPage abgerufen wird.
• fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
  • Diese Funktion ermöglicht es Ihnen, die nächste "Seite" von Ergebnissen abzurufen.
  • options.cancelRefetch: boolean Wenn dies auf true gesetzt ist, ruft wiederholtes Aufrufen von fetchNextPage queryFn jedes Mal auf, unabhängig davon, ob die vorherige Aufforderung aufgelöst wurde oder nicht. Außerdem werden die Ergebnisse früherer Aufforderungen ignoriert. Wenn dies auf false gesetzt ist, hat wiederholtes Aufrufen von fetchNextPage keine Auswirkung, bis die erste Aufforderung aufgelöst wurde. Standardmäßig ist dies true.
• fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
  • Diese Funktion ermöglicht es Ihnen, die vorherige "Seite" von Ergebnissen abzurufen.
  • options.cancelRefetch: boolean wie bei fetchNextPage.
• hasNextPage: boolean
  • Ist true, wenn eine nächste Seite abgerufen werden kann (bekannt über die Option getNextPageParam).
• hasPreviousPage: boolean
  • Ist true, wenn eine vorherige Seite abgerufen werden kann (bekannt über die Option getPreviousPageParam).
• isFetchNextPageError: boolean
  • Ist true, wenn die Query beim Abrufen der nächsten Seite fehlgeschlagen ist.
• isFetchPreviousPageError: boolean
  • Ist true, wenn die Query beim Abrufen der vorherigen Seite fehlgeschlagen ist.
• isRefetching: boolean
  • Ist true, wann immer ein Hintergrund-Refetch im Gange ist, was *nicht* das anfängliche pending oder das Abrufen der nächsten oder vorherigen Seite beinhaltet.
  • Ist dasselbe wie isFetching && !isPending && !isFetchingNextPage && !isFetchingPreviousPage
• isRefetchError: boolean
  • Ist true, wenn die Query beim Refetchen einer Seite fehlgeschlagen ist.
• promise: Promise<TData>
  • Ein stabiles Promise, das zum Query-Ergebnis aufgelöst wird.
  • Dies kann mit React.use() verwendet werden, um Daten abzurufen.
  • Erfordert, dass das Feature-Flag experimental_prefetchInRender auf dem QueryClient aktiviert ist.

Beachten Sie, dass imperative Abrufe, wie z. B. fetchNextPage, das Standardverhalten für Refetches stören und zu veralteten Daten führen können. Stellen Sie sicher, dass Sie diese Funktionen nur als Reaktion auf Benutzeraktionen aufrufen oder fügen Sie Bedingungen hinzu wie hasNextPage && !isFetching.