Reaktivität

Svelte verwendet einen Compiler, um Ihren Code zu erstellen, der das Rendering optimiert. Standardmäßig laufen Komponenten einmal, es sei denn, sie werden in Ihrem Markup referenziert. Um auf Änderungen an Optionen reagieren zu können, müssen Sie Stores verwenden.

Im folgenden Beispiel wird die Option refetchInterval aus der Variable intervalMs gesetzt, die an das Eingabefeld gebunden ist. Da die Abfrage jedoch nicht auf Änderungen an intervalMs reagieren kann, ändert sich refetchInterval nicht, wenn sich der Wert des Eingabefelds ändert.

svelte

<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query'

  const endpoint = 'https://:5173/api/data'

  let intervalMs = 1000

  const query = createQuery({
    queryKey: ['refetch'],
    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
    refetchInterval: intervalMs,
  })
</script>

<input type="number" bind:value={intervalMs} />

<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query'

  const endpoint = 'https://:5173/api/data'

  let intervalMs = 1000

  const query = createQuery({
    queryKey: ['refetch'],
    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
    refetchInterval: intervalMs,
  })
</script>

<input type="number" bind:value={intervalMs} />

Um dies zu lösen, können wir intervalMs in einen beschreibbaren Store umwandeln. Die Abfrageoptionen können dann in einen abgeleiteten Store umgewandelt werden, der mit echter Reaktivität an die Funktion übergeben wird.

svelte

<script lang="ts">
  import { derived, writable } from 'svelte/store'
  import { createQuery } from '@tanstack/svelte-query'

  const endpoint = 'https://:5173/api/data'

  const intervalMs = writable(1000)

  const query = createQuery(
    derived(intervalMs, ($intervalMs) => ({
      queryKey: ['refetch'],
      queryFn: async () => await fetch(endpoint).then((r) => r.json()),
      refetchInterval: $intervalMs,
    })),
  )
</script>

<input type="number" bind:value={$intervalMs} />

<script lang="ts">
  import { derived, writable } from 'svelte/store'
  import { createQuery } from '@tanstack/svelte-query'

  const endpoint = 'https://:5173/api/data'

  const intervalMs = writable(1000)

  const query = createQuery(
    derived(intervalMs, ($intervalMs) => ({
      queryKey: ['refetch'],
      queryFn: async () => await fetch(endpoint).then((r) => r.json()),
      refetchInterval: $intervalMs,
    })),
  )
</script>

<input type="number" bind:value={$intervalMs} />

Möchten Sie die Dokumentation überspringen?

Möchten Sie die Dokumentation überspringen?