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.

Zum Beispiel möchten Sie möglicherweise einen Lade-Spinner anzeigen, während die Daten abgerufen werden, oder Sie möchten Fehler ordnungsgemäß behandeln.

Ebenso könnten Sie auch nach einer Möglichkeit suchen, die Daten zu cachen, damit Sie sie nicht jedes Mal erneut 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

vue

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive } from 'vue'

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

const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')

const defaultValues = reactive({
  firstName,
  lastName,
})

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <p v-if="isLoading">Loading..</p>
  <form v-else @submit.prevent.stop="form.handleSubmit">
    <!-- ... -->
  </form>
</template>

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive } from 'vue'

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

const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')

const defaultValues = reactive({
  firstName,
  lastName,
})

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <p v-if="isLoading">Loading..</p>
  <form v-else @submit.prevent.stop="form.handleSubmit">
    <!-- ... -->
  </form>
</template>

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

Grundlegende Verwendung

Bytes abonnieren

Bytes abonnieren