Datenmutationen

Da TanStack Router keine Daten speichert oder zwischenspeichert, ist seine Rolle bei Datenmutationen außerhalb der Reaktion auf potenzielle URL-Seiteneffekte von externen Mutationsereignissen gering bis nicht vorhanden. Dennoch haben wir eine Liste mutationsbezogener Funktionen zusammengestellt, die Sie nützlich finden könnten, sowie Bibliotheken, die diese implementieren.

Suchen und verwenden Sie Mutationsdienstprogramme, die unterstützen

• Verarbeitung und Zwischenspeicherung des Einreichungsstatus
• Bereitstellung von sowohl lokalem als auch globalem optimistischem UI-Support
• Integrierte Hooks zur Invalidierung (oder automatische Unterstützung)
• Verarbeitung mehrerer gleichzeitig laufender Mutationen
• Organisation des Mutationsstatus als global zugängliche Ressource
• Einreichungsstatusverlauf und Garbage Collection

Einige vorgeschlagene Bibliotheken

• TanStack Query
• SWR
• RTK Query
• urql
• Relay
• Apollo

Oder sogar...

• Zustand
• Jotai
• Recoil
• Redux

Ähnlich wie beim Datenabruf ist der Mutationsstatus keine Einheitslösung, sodass Sie eine Lösung auswählen müssen, die Ihren und den Bedürfnissen Ihres Teams entspricht. Wir empfehlen, ein paar verschiedene Lösungen auszuprobieren und zu sehen, was für Sie am besten funktioniert.

⚠️ Immer noch hier? Der Einreichungsstatus ist ein interessantes Thema im Hinblick auf die Persistenz. Behalten Sie jede Mutation für immer bei? Woher wissen Sie, wann Sie sie loswerden sollen? Was passiert, wenn der Benutzer von einem Bildschirm weg und dann wieder zurück navigiert? Lassen Sie uns eintauchen!

TanStack Router verfügt über eine kurzfristige Zwischenspeicherung. Obwohl wir keine Daten speichern, nachdem ein Routen-Match de-mountet wurde, besteht eine hohe Wahrscheinlichkeit, dass die Daten des aktuellen Routen-Matches veraltet sein könnten, wenn Mutationen im Zusammenhang mit den im Router gespeicherten Daten vorgenommen werden.

Wenn Mutationen im Zusammenhang mit Loader-Daten vorgenommen werden, können wir router.invalidate verwenden, um den Router zu zwingen, alle aktuellen Routen-Matches neu zu laden.

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    router.invalidate()
  } catch {
    //
  }
}

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    router.invalidate()
  } catch {
    //
  }
}

Das Invalidieren aller aktuellen Routen-Matches geschieht im Hintergrund, sodass vorhandene Daten weiterhin bereitgestellt werden, bis die neuen Daten bereit sind, genau wie beim Navigieren zu einer neuen Route.

Wenn Sie warten möchten, bis die Invalidierung abgeschlossen ist und alle Loader beendet sind, übergeben Sie {sync: true} an router.invalidate.

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    await router.invalidate({ sync: true })
  } catch {
    //
  }
}

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    await router.invalidate({ sync: true })
  } catch {
    //
  }
}

Unabhängig von der verwendeten Mutationsbibliothek erzeugen Mutationen oft Zustände, die mit ihrer Einreichung zusammenhängen. Während die meisten Mutationen "Set-and-forget" sind, sind einige Mutationszustände langlebiger, entweder zur Unterstützung optimierter Benutzeroberflächen oder zur Rückmeldung an den Benutzer über den Status seiner Einreichungen. Die meisten Zustandsmanager werden diesen Einreichungsstatus korrekt beibehalten und ihn verfügbar machen, um UI-Elemente wie Ladeanzeigen, Erfolgsmeldungen, Fehlermeldungen usw. anzuzeigen.

Betrachten wir die folgenden Interaktionen

• Der Benutzer navigiert zum Bildschirm /posts/123/edit, um einen Beitrag zu bearbeiten
• Der Benutzer bearbeitet den Beitrag 123 und sieht nach Erfolg eine Erfolgsmeldung unter dem Editor, dass der Beitrag aktualisiert wurde.
• Der Benutzer navigiert zum Bildschirm /posts.
• Der Benutzer navigiert zurück zum Bildschirm /posts/123/edit.

Ohne Ihre Mutationsmanagementbibliothek über die Routenänderung zu informieren, ist es möglich, dass Ihr Einreichungsstatus noch vorhanden ist und Ihr Benutzer beim Zurückkehren zum vorherigen Bildschirm immer noch die Meldung **"Beitrag erfolgreich aktualisiert"** sieht. Das ist nicht ideal. Offensichtlich war es nicht unsere Absicht, diesen Mutationsstatus für immer beizubehalten, oder?!

Hoffentlich und hypothetisch ist der einfachste Weg, dass Ihre Mutationsbibliothek einen Schlüsselmechanismus unterstützt, der es ermöglicht, den Status Ihrer Mutationen zurückzusetzen, wenn sich der Schlüssel ändert.

const routeApi = getRouteApi('/room/$roomId/chat')

function ChatRoom() {
  const { roomId } = routeApi.useParams()

  const sendMessageMutation = useCoolMutation({
    fn: sendMessage,
    // Clear the mutation state when the roomId changes
    // including any submission state
    key: ['sendMessage', roomId],
  })

  // Fire off a bunch of messages
  const test = () => {
    sendMessageMutation.mutate({ roomId, message: 'Hello!' })
    sendMessageMutation.mutate({ roomId, message: 'How are you?' })
    sendMessageMutation.mutate({ roomId, message: 'Goodbye!' })
  }

  return (
    <>
      {sendMessageMutation.submissions.map((submission) => {
        return (
          <div>
            <div>{submission.status}</div>
            <div>{submission.message}</div>
          </div>
        )
      })}
    </>
  )
}

const routeApi = getRouteApi('/room/$roomId/chat')

function ChatRoom() {
  const { roomId } = routeApi.useParams()

  const sendMessageMutation = useCoolMutation({
    fn: sendMessage,
    // Clear the mutation state when the roomId changes
    // including any submission state
    key: ['sendMessage', roomId],
  })

  // Fire off a bunch of messages
  const test = () => {
    sendMessageMutation.mutate({ roomId, message: 'Hello!' })
    sendMessageMutation.mutate({ roomId, message: 'How are you?' })
    sendMessageMutation.mutate({ roomId, message: 'Goodbye!' })
  }

  return (
    <>
      {sendMessageMutation.submissions.map((submission) => {
        return (
          <div>
            <div>{submission.status}</div>
            <div>{submission.message}</div>
          </div>
        )
      })}
    </>
  )
}

Für Bibliotheken, die keinen Schlüsselmechanismus haben, müssen wir den Mutationsstatus wahrscheinlich manuell zurücksetzen, wenn der Benutzer den Bildschirm verlässt. Um dies zu lösen, können wir die Methoden invalidate und subscribe von TanStack Router verwenden, um Mutationszustände zu löschen, wenn der Benutzer sie nicht mehr benötigt.

Die Methode router.subscribe ist eine Funktion, die einen Callback an verschiedene Router-Ereignisse bindet. Das Ereignis, das wir hier verwenden werden, ist das onResolved-Ereignis. Es ist wichtig zu verstehen, dass dieses Ereignis ausgelöst wird, wenn sich der Pfad des Ortes *ändert (nicht nur neu geladen wird) und schließlich aufgelöst wurde.

Dies ist ein großartiger Ort, um Ihre alten Mutationszustände zurückzusetzen. Hier ist ein Beispiel

const router = createRouter()
const coolMutationCache = createCoolMutationCache()

const unsubscribeFn = router.subscribe('onResolved', () => {
  // Reset mutation states when the route changes
  coolMutationCache.clear()
})

const router = createRouter()
const coolMutationCache = createCoolMutationCache()

const unsubscribeFn = router.subscribe('onResolved', () => {
  // Reset mutation states when the route changes
  coolMutationCache.clear()
})