Datenmutationen

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

Suchen Sie nach Mutationswerkzeugen, die unterstützen, und verwenden Sie diese

• Verarbeitung und Zwischenspeicherung des Einreichungszustands
• Bereitstellung lokaler und globaler optimistischer UI-Unterstützung
• Integrierte Hooks zur Einbindung der Ungültigmachung (oder automatische Unterstützung)
• Verarbeitung mehrerer gleichzeitiger In-Flight-Mutationen
• Organisation des Mutationszustands als global zugängliche Ressource
• Einreichungszustandshistorie 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 Mutationszustand keine Einheitslösung, daher müssen Sie eine Lösung wählen, die Ihren Bedürfnissen und den Bedürfnissen Ihres Teams entspricht. Wir empfehlen, einige verschiedene Lösungen auszuprobieren und zu sehen, was für Sie am besten funktioniert.

⚠️ Immer noch hier? Der Einreichungszustand ist ein interessantes Thema, wenn es um Persistenz geht. Behalten Sie jede Mutation für immer? Woher wissen Sie, wann Sie sie loswerden sollen? Was passiert, wenn der Benutzer von einem Bildschirm weg- und dann wieder zurücknavigiert? Tauchen wir ein!

TanStack Router verfügt über eine kurzfristige Zwischenspeicherung. Obwohl wir also keine Daten speichern, nachdem ein Routen-Match deinstalliert 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 durchgeführt werden.

Wenn Mutationen im Zusammenhang mit Loader-Daten durchgeführt 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 Ungültigmachen aller aktuellen Routen-Matches geschieht im Hintergrund, sodass bestehende 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 Ungültigmachung abgeschlossen ist, bis alle Loader fertig 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 erstellen Mutationen oft zustandsbezogene Einreichungen. Während die meisten Mutationen "Set-and-Forget" sind, sind einige Mutationszustände längerlebig, entweder zur Unterstützung der optimistischen UI oder zur Rückmeldung an den Benutzer über den Status seiner Einreichungen. Die meisten Zustandsmanager werden diesen Einreichungszustand korrekt beibehalten und ihn verfügbar machen, um UI-Elemente wie Lade-Spinner, Erfolgs- oder Fehlermeldungen usw. anzeigen zu können.

Betrachten wir die folgenden Interaktionen

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

Ohne Ihre Mutationsverwaltungsbibliothek über die Routenänderung zu informieren, ist es möglich, dass Ihr Einreichungszustand immer 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 Mutationszustand 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 Zustand 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 Mutationszustand 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 für verschiedene Router-Ereignisse abonniert. Das Ereignis, das wir hier insbesondere verwenden werden, ist das onResolved-Ereignis. Es ist wichtig zu verstehen, dass dieses Ereignis ausgelöst wird, wenn sich der Ortspfad *ändert (nicht nur neu geladen wird) und schließlich aufgelöst ist*.

Dies ist ein guter 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()
})