Asynchrone Anfangswerte

Nehmen wir an, Sie möchten Daten von einer API abrufen und diese als Anfangswerte für ein Formular verwenden.

Auch wenn dieses Problem auf den ersten Blick einfach erscheint, gibt es verborgene Komplexitäten, an die Sie bisher vielleicht noch nicht gedacht haben.

Sie möchten vielleicht einen Lade-Spinner anzeigen, während die Daten abgerufen werden, oder Fehler elegant behandeln. Ebenso könnten Sie auch nach einer Möglichkeit suchen, die Daten zwischenzuspeichern, damit Sie sie nicht jedes Mal abrufen müssen, wenn das Formular gerendert wird.

Obwohl wir viele dieser Funktionen von Grund auf neu implementieren könnten, würde dies einem anderen Projekt, das wir pflegen, sehr ähnlich sehen: TanStack Query.

Daher zeigt diese Anleitung, wie Sie TanStack Form mit TanStack Query kombinieren können, um das gewünschte Verhalten zu erzielen.

Grundlegende Verwendung

svelte

<script>
  import { createForm } from '@tanstack/svelte-form'
  import { createQuery } from '@tanstack/svelte-query'

    const { data, isLoading } = createQuery(() => ({
      queryKey: ['data'],
      queryFn: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        return { firstName: 'FirstName', lastName: 'LastName' }
      },
    }))

    const form = createForm(() => ({
      defaultValues: {
        firstName: $data?.firstName ?? '',
        lastName: $data?.lastName ?? '',
      },
      onSubmit: async ({ value }) => {
        // Do something with form data
        console.log(value)
      },
    }))
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else}
  <!-- form... -->
{/if}

<script>
  import { createForm } from '@tanstack/svelte-form'
  import { createQuery } from '@tanstack/svelte-query'

    const { data, isLoading } = createQuery(() => ({
      queryKey: ['data'],
      queryFn: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        return { firstName: 'FirstName', lastName: 'LastName' }
      },
    }))

    const form = createForm(() => ({
      defaultValues: {
        firstName: $data?.firstName ?? '',
        lastName: $data?.lastName ?? '',
      },
      onSubmit: async ({ value }) => {
        // Do something with form data
        console.log(value)
      },
    }))
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else}
  <!-- form... -->
{/if}

Dies zeigt einen Lade-Spinner an, bis die Daten abgerufen wurden, und rendert dann das Formular mit den abgerufenen Daten als Anfangswerte.

Grundlegende Verwendung

Bytes abonnieren

Bytes abonnieren