useQuery

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  () => ({
    queryKey,
    queryFn,
    enabled,
    select,
    placeholderData,
    deferStream,
    reconcile,
    gcTime,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    staleTime,
    throwOnError,
  }),
  () => queryClient,
)

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  () => ({
    queryKey,
    queryFn,
    enabled,
    select,
    placeholderData,
    deferStream,
    reconcile,
    gcTime,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    staleTime,
    throwOnError,
  }),
  () => queryClient,
)

Hier sind einige Beispiele für die Verwendung des useQuery Primitivs in Solid Query.

Die grundlegendste Verwendung von useQuery ist die Erstellung einer Abfrage, die Daten von einer API abruft.

import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}

import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}

Der Grund, warum useQuery eine Funktion akzeptiert, die ein Objekt zurückgibt, ist die Ermöglichung reaktiver Optionen. Dies ist nützlich, wenn Abfrageoptionen von anderen Werten/Signalen abhängen, die sich im Laufe der Zeit ändern können. Solid Query kann die übergebene Funktion in einem reaktiven Geltungsbereich verfolgen und sie bei Änderungen der Abhängigkeiten erneut ausführen.

import { useQuery } from '@tanstack/solid-query'

function App() {
  const [filter, setFilter] = createSignal('all')

  const todos = useQuery(() => ({
    queryKey: ['todos', filter()],
    queryFn: async () => {
      const response = await fetch(`/api/todos?filter=${filter()}`)
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <div>
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('active')}>Active</button>
        <button onClick={() => setFilter('completed')}>Completed</button>
      </div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}

import { useQuery } from '@tanstack/solid-query'

function App() {
  const [filter, setFilter] = createSignal('all')

  const todos = useQuery(() => ({
    queryKey: ['todos', filter()],
    queryFn: async () => {
      const response = await fetch(`/api/todos?filter=${filter()}`)
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <div>
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('active')}>Active</button>
        <button onClick={() => setFilter('completed')}>Completed</button>
      </div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}

useQuery unterstützt das Auslösen von SolidJS Suspense und ErrorBoundary Komponenten, wenn die Abfrage in einem ausstehenden oder Fehlerzustand ist. Dies ermöglicht es Ihnen, Lade- und Fehlerzustände in Ihren Komponenten einfach zu handhaben.

import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
    throwOnError: true,
  }))

  return (
    <ErrorBoundary fallback={<div>Error: {todos.error.message}</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Suspense>
    </ErrorBoundary>
  )
}

import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
    throwOnError: true,
  }))

  return (
    <ErrorBoundary fallback={<div>Error: {todos.error.message}</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Suspense>
    </ErrorBoundary>
  )
}

• Query-Optionen - Accessor<QueryOptions>

  • queryKey: unknown[]

    • Erforderlich
    • Der Abfrageschlüssel, der für diese Abfrage verwendet werden soll.
    • Der Query-Schlüssel wird zu einem stabilen Hash gehasht. Weitere Informationen finden Sie unter Query Keys.
    • Die Abfrage wird automatisch aktualisiert, wenn sich dieser Schlüssel ändert (solange enabled nicht auf false gesetzt ist).

  • queryFn: (context: QueryFunctionContext) => Promise<TData>

    • Erforderlich, aber nur, wenn keine Standard-Query-Funktion definiert wurde Weitere Informationen finden Sie unter Default Query Function.
    • 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. Die Daten dürfen nicht undefined sein.

  • enabled: boolean

    • Setzen Sie dies auf false, um zu verhindern, dass diese Abfrage automatisch ausgeführt wird.
    • Kann für Dependent Queries verwendet werden, weitere Informationen finden Sie dort.

  • select: (data: TData) => unknown

    • Optional
    • Diese Option kann verwendet werden, um Daten zu transformieren oder einen Teil der von der Abfragefunktion zurückgegebenen Daten auszuwählen. Sie wirkt sich auf den zurückgegebenen data-Wert aus, hat aber keinen Einfluss darauf, was im Abfrage-Cache gespeichert wird.
    • Die select-Funktion wird nur ausgeführt, wenn sich data geändert hat oder wenn sich die Referenz auf die select-Funktion selbst ändert. Um zu optimieren, packen Sie die Funktion in useCallback.

  • placeholderData: TData | (previousValue: TData | undefined; previousQuery: Query | undefined,) => TData

    • Optional
    • Wenn gesetzt, wird dieser Wert als Platzhalterdaten für diesen speziellen Abfragebeobachter verwendet, während die Abfrage noch im pending-Status ist.
    • placeholderData wird **nicht** in den Cache **persistiert**.
    • Wenn Sie eine Funktion für placeholderData angeben, erhalten Sie im ersten Argument die zuvor beobachteten Abfragedaten, falls verfügbar, und das zweite Argument ist die vollständige vorherige Abfrageinstanz.

  • deferStream: boolean

    • Optional
    • Standardmäßig false
    • Nur anwendbar, wenn Abfragen auf dem Server mit Streaming gerendert werden.
    • Setzen Sie deferStream auf true, um darauf zu warten, dass die Abfrage auf dem Server aufgelöst wird, bevor der Stream geleert wird.
    • Dies kann nützlich sein, um zu vermeiden, dass ein Ladezustand an den Client gesendet wird, bevor die Abfrage aufgelöst wurde.

  • reconcile: false | string | ((oldData: TData | undefined, newData: TData) => TData)

    • Optional
    • Standardmäßig false
    • Setzen Sie dies auf einen String, um die Abgleichung zwischen Abfrageergebnissen basierend auf dem String-Schlüssel zu aktivieren.
    • Setzen Sie dies auf eine Funktion, die die alten und neuen Daten akzeptiert und Daten vom gleichen Typ zurückgibt, um eine benutzerdefinierte Abgleichlogik zu implementieren.

  • gcTime: number | Infinity

    • Standardmäßig 5 * 60 * 1000 (5 Minuten) oder Infinity während SSR
    • Die Zeit in Millisekunden, in der ungenutzte/inaktive Cache-Daten im Speicher verbleiben. Wenn der Cache einer Abfrage ungenutzt oder inaktiv wird, werden diese Cache-Daten nach dieser Dauer bereinigt. Wenn unterschiedliche Bereinigungszeiten angegeben werden, wird die längste verwendet.
    • Hinweis: Die maximal zulässige Zeit beträgt etwa 24 Tage, es ist jedoch möglich, diese Grenze mit timeoutManager.setTimeoutProvider zu umgehen.
    • Wenn auf Infinity gesetzt, wird die automatische Speicherbereinigung deaktiviert.

  • networkMode: 'online' | 'always' | 'offlineFirst'

    • optional
    • standardmäßig 'online'
    • Weitere Informationen finden Sie unter Network Mode.

  • initialData: TData | () => TData

    • Optional
    • Wenn gesetzt, wird dieser Wert als anfängliche Daten für den Abfrage-Cache verwendet (solange die Abfrage noch nicht erstellt oder zwischengespeichert wurde).
    • Wenn auf eine Funktion gesetzt, wird die Funktion **einmal** während der gemeinsamen/Stammabfrageinitialisierung aufgerufen und soll synchron die initialData zurückgeben.
    • Anfängliche Daten gelten standardmäßig als veraltet, es sei denn, eine staleTime wurde festgelegt.
    • initialData wird in den Cache **persistiert**.

  • initialDataUpdatedAt: number | (() => number | undefined)

    • Optional
    • Wenn gesetzt, wird dieser Wert als Zeitpunkt (in Millisekunden) verwendet, wann die initialData selbst zuletzt aktualisiert wurde.

  • meta: Record<string, unknown>

    • Optional
    • Wenn gesetzt, werden zusätzliche Informationen im Abfrage-Cache-Eintrag gespeichert, die nach Bedarf verwendet werden können. Sie sind dort verfügbar, wo die query verfügbar ist, und sind auch Teil des QueryFunctionContext, der der queryFn bereitgestellt wird.

  • queryKeyHashFn: (queryKey: QueryKey) => string

    • Optional
    • Wenn angegeben, wird diese Funktion verwendet, um den queryKey in einen String zu hashen.

  • refetchInterval: number | false | ((query: Query) => number | false | undefined)

    • Optional
    • Wenn auf eine Zahl gesetzt, werden alle Abfragen in diesem Intervall in Millisekunden kontinuierlich erneut abgefragt.
    • Wenn auf eine Funktion gesetzt, wird die Funktion mit der Abfrage ausgeführt, um ein Intervall zu berechnen.

  • refetchIntervalInBackground: boolean

    • Optional
    • Wenn auf true gesetzt, werden Abfragen, die mit einem refetchInterval kontinuierlich erneut abgefragt, auch dann weiter abgefragt, wenn ihr Tab/Fenster im Hintergrund ist.

  • refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")

    • Optional
    • Standardmäßig true
    • Wenn auf true gesetzt, wird die Abfrage beim Mounten erneut abgefragt, wenn die Daten veraltet sind.
    • Wenn auf false gesetzt, wird die Abfrage beim Mounten nicht erneut abgefragt.
    • Wenn auf "always" gesetzt, wird die Abfrage beim Mounten immer neu abgerufen.
    • Wenn auf eine Funktion gesetzt, wird die Funktion mit der Abfrage ausgeführt, um den Wert zu berechnen.

  • refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")

    • Optional
    • Standardmäßig true
    • Wenn auf true gesetzt, wird die Abfrage beim Fokus auf das Fenster erneut abgefragt, wenn die Daten veraltet sind.
    • Wenn auf false gesetzt, wird die Abfrage beim Fokus auf das Fenster nicht erneut abgefragt.
    • Wenn auf "always" gesetzt, wird die Abfrage bei Fensterfokus immer neu abgerufen.
    • Wenn auf eine Funktion gesetzt, wird die Funktion mit der Abfrage ausgeführt, um den Wert zu berechnen.

  • refetchOnReconnect: boolean | "always" | ((query: Query) => boolean | "always")

    • Optional
    • Standardmäßig true
    • Wenn auf true gesetzt, wird die Abfrage bei Wiederherstellung der Verbindung erneut abgefragt, wenn die Daten veraltet sind.
    • Wenn auf false gesetzt, wird die Abfrage bei Wiederherstellung der Verbindung nicht erneut abgefragt.
    • Wenn auf "always" gesetzt, wird die Abfrage bei Wiederverbindung immer neu abgerufen.
    • Wenn auf eine Funktion gesetzt, wird die Funktion mit der Abfrage ausgeführt, um den Wert zu berechnen.

  • retry: boolean | number | (failureCount: number, error: TError) => boolean

    • Wenn false, werden fehlgeschlagene Abfragen standardmäßig nicht wiederholt.
    • Wenn true, werden fehlgeschlagene Abfragen unendlich oft wiederholt.
    • Wenn auf eine Zahl gesetzt, z. B. 3, werden fehlgeschlagene Abfragen wiederholt, bis die Anzahl der fehlgeschlagenen Abfragen diese Zahl erreicht.
    • standardmäßig 3 auf dem Client und 0 auf dem Server

  • retryOnMount: boolean

    • Wenn auf false gesetzt, wird die Abfrage bei einem Fehler beim Mounten nicht wiederholt. Standardmäßig true.

  • retryDelay: number | (retryAttempt: number, error: TError) => number

    • Diese Funktion empfängt eine Ganzzahl retryAttempt und den tatsächlichen Fehler und gibt die Verzögerung in Millisekunden zurück, die vor dem nächsten Versuch angewendet werden soll.
    • Eine Funktion wie attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000) wendet exponentielle Rückkopplung an.
    • Eine Funktion wie attempt => attempt * 1000 wendet lineare Rückkopplung an.

  • staleTime: number | Infinity

    • Optional
    • Standardmäßig 0
    • Die Zeit in Millisekunden, nach der Daten als veraltet gelten. Dieser Wert gilt nur für den Hook, auf dem er definiert ist.
    • Wenn auf Infinity gesetzt, werden die Daten niemals als veraltet betrachtet.

  • throwOnError: undefined | boolean | (error: TError, query: Query) => boolean

    • Setzen Sie dies auf true, wenn Fehler in der Renderphase ausgelöst und an die nächste Fehlergrenze weitergegeben werden sollen.
    • Setzen Sie dies auf false, um das Standardverhalten von suspense, Fehler an die Fehlergrenze zu werfen, zu deaktivieren.
    • Wenn auf eine Funktion gesetzt, erhält diese den Fehler und die Abfrage und sollte einen booleschen Wert zurückgeben, der angibt, ob der Fehler in einer Fehlergrenze angezeigt werden soll (true) oder ob der Fehler als Status zurückgegeben werden soll (false).

• Query Client - Accessor<QueryClient>

  • Optional
  • Verwenden Sie dies, um einen benutzerdefinierten QueryClient zu verwenden. Andernfalls wird der aus dem nächsten Kontext verwendet.

useQuery gibt einen SolidJS-Store mit den folgenden Eigenschaften zurück.

• status: QueryStatus

  • Wird
    • pending sein, wenn keine zwischengespeicherten Daten vorhanden sind und noch kein Abfrageversuch abgeschlossen wurde.
    • error sein, wenn der Abfrageversuch zu einem Fehler geführt hat. Die entsprechende error-Eigenschaft enthält den Fehler, der beim Versuch des Abrufs empfangen wurde.
    • success sein, wenn die Abfrage eine Antwort ohne Fehler erhalten hat und bereit ist, ihre Daten anzuzeigen. Die entsprechende data-Eigenschaft der Abfrage sind die Daten, die vom erfolgreichen Abruf empfangen wurden, oder wenn die enabled-Eigenschaft der Abfrage auf false gesetzt ist und noch nicht abgerufen wurde, ist data die erste initialData, die der Abfrage bei der Initialisierung zugeführt wurde.

• isPending: boolean

  • Ein abgeleitetes boolesches Ergebnis der obigen status-Variable zur Bequemlichkeit.

• isSuccess: boolean

  • Ein abgeleitetes boolesches Ergebnis der obigen status-Variable zur Bequemlichkeit.

• isError: boolean

  • Ein abgeleitetes boolesches Ergebnis der obigen status-Variable zur Bequemlichkeit.

• isLoadingError: boolean

  • Ist true, wenn die Abfrage beim ersten Abruf fehlgeschlagen ist.

• isRefetchError: boolean

  • Ist true, wenn die Abfrage beim erneuten Abruf fehlgeschlagen ist.

• data: Resource<TData>

  • Standardmäßig undefined.
  • Die zuletzt erfolgreich aufgelösten Daten für die Abfrage.
  • Wichtig: Die Eigenschaft data ist eine SolidJS-Ressource. Das bedeutet, dass, wenn auf die Daten unter einer <Suspense> Komponente zugegriffen wird, die Suspense-Grenze ausgelöst wird, wenn die Daten noch nicht verfügbar sind.

• dataUpdatedAt: number

  • Der Zeitstempel, wann die Abfrage zuletzt den status als "success" zurückgegeben hat.

• error: null | TError

  • Standardmäßig null
  • Das Fehlerobjekt für die Abfrage, wenn ein Fehler ausgelöst wurde.

• errorUpdatedAt: number

  • Der Zeitstempel, wann die Abfrage zuletzt den status als "error" zurückgegeben hat.

• isStale: boolean

  • Ist true, wenn die Daten im Cache ungültig gemacht wurden oder wenn die Daten älter als die angegebene staleTime sind.

• isPlaceholderData: boolean

  • Ist true, wenn die angezeigten Daten die Platzhalterdaten sind.

• isFetched: boolean

  • Ist true, wenn die Abfrage abgerufen wurde.

• isFetchedAfterMount: boolean

  • Ist true, wenn die Abfrage nach dem Mounten der Komponente abgerufen wurde.
  • Diese Eigenschaft kann verwendet werden, um keine zuvor zwischengespeicherten Daten anzuzeigen.

• fetchStatus: FetchStatus

  • fetching: Ist true, wenn die queryFn ausgeführt wird, was sowohl das anfängliche pending als auch Hintergrund-Refetches einschließt.
  • paused: Die Abfrage wollte abrufen, wurde aber paused.
  • idle: Die Abfrage ruft nicht ab.
  • Weitere Informationen finden Sie unter Network Mode.

• isFetching: boolean

  • Ein abgeleitetes boolesches Ergebnis der obigen fetchStatus-Variable zur Bequemlichkeit.

• isPaused: boolean

  • Ein abgeleitetes boolesches Ergebnis der obigen fetchStatus-Variable zur Bequemlichkeit.

• isRefetching: boolean

  • Ist true, wenn ein Hintergrund-Refetch in Bearbeitung ist, was anfängliche pending **nicht** einschließt.
  • Ist dasselbe wie isFetching && !isPending

• isLoading: boolean

  • Ist true, wenn der erste Abruf einer Abfrage in Bearbeitung ist.
  • Ist dasselbe wie isFetching && isPending

• isInitialLoading: boolean

  • veraltet
  • Ein Alias für isLoading, wird in der nächsten Hauptversion entfernt.

• failureCount: number

  • Die Anzahl der Fehler für die Abfrage.
  • Wird jedes Mal erhöht, wenn die Abfrage fehlschlägt.
  • Wird auf 0 zurückgesetzt, wenn die Abfrage erfolgreich ist.

• failureReason: null | TError

  • Der Fehlergrund für die Wiederholung der Abfrage.
  • Wird auf null zurückgesetzt, wenn die Abfrage erfolgreich ist.

• errorUpdateCount: number

  • Die Summe aller Fehler.

• refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>

  • Eine Funktion, um die Abfrage manuell erneut abzufragen.
  • Wenn die Abfrage einen Fehler auslöst, wird der Fehler nur protokolliert. Wenn Sie möchten, dass ein Fehler ausgelöst wird, übergeben Sie die Option throwOnError: true.
  • cancelRefetch?: boolean
    • Standardmäßig true
      • Standardmäßig wird eine aktuell laufende Anfrage abgebrochen, bevor eine neue Anfrage gestellt wird.
    • Wenn auf false gesetzt, erfolgt kein erneuter Abruf, wenn bereits eine Anfrage läuft.