Nahtlose Interaktivität: Optimistische Updates in GraphQL und React
Insbesondere bei langsamen Internetverbindungen empfehlen sich optimistische Updates für eine schnellere Interaktivität von User Interfaces in Webanwendungen.
(Bild: erstellt mit KI durch iX)
- Jonas Herrmannsdörfer
Typische Situation: Man sitzt im Zug auf Geschäftsreise und nutzt eine Webanwendung. Ständig ist die Internetverbindung schlecht oder setzt komplett aus. Die Anwendung ist nicht nutzbar, überall Ladesymbole. Sobald man auf "Speichern" klickt, muss man minutenlang warten. An vernünftiges Arbeiten ist nicht mehr zu denken.
Aber auch, wenn etwa in einer ländlichen Region das Internet allgemein sehr langsam ist, kann schon das Hinzufügen eines Artikels in den Warenkorb mehrere Sekunden dauern. Dabei könnten Webentwicklerinnen oder -entwickler diese Probleme sehr einfach beheben: Optimistische Updates, wie sie zum Beispiel mit GraphQL und React möglich sind, erlauben unabhängig der Internetgeschwindigkeit eine nahtlose Interaktivität.
Vorweggenommene API-Antwort
Optimistische Updates sind ein Pattern, um die Ergebnisse einer Mutation (Update) zu simulieren und die Benutzeroberfläche zu aktualisieren, noch bevor man eine Antwort vom Server erhalten hat. Sobald die Antwort eingegangen ist, verwirft die JavaScript-Bibliothek React das optimistische Update-Ergebnis und ersetzt dieses durch das tatsächliche Ergebnis. Optimistische Updates bieten eine einfache Möglichkeit, die Reaktionszeit des User Interface (UI) zu verkürzen und dabei sicherzustellen, dass die Daten mit der tatsächlichen Antwort übereinstimmen, wenn diese eintrifft.
Beispielsweise würde man, wenn man einen Artikel zum Warenkorb hinzufügen möchte, bei einem gewöhnlichen Update mit React eine API ansprechen, dieser mitteilen, welcher Artikel zum Warenkorb hinzugefügt werden soll, die Antwort der API abwarten und dann alle Artikel, die im Warenkorb sind, im UI darstellen.
Bei einem optimistischen Update würde man anders vorgehen: Wenn eine Person einen Artikel zum Warenkorb hinzufügt, würde React eine API ansprechen und dieser mitteilen, welcher Artikel zum Warenkorb hinzugefügt wurde und sofort anzeigen, welche Artikel im Warenkorb sind. Sobald die API eine Antwort liefert, würde man das zuvor dargestellte optimistische Ergebnis mit der Antwort der API überschreiben.
Mit diesem Vorgehen sehen Nutzerinnen und Nutzer sofort alle im Warenkorb befindlichen Artikel, ohne auf die Antwort des Servers warten zu müssen, was eine nahtlose Interaktion ermöglicht. Das fällt sowohl bei einer schnellen als auch bei einer langsamen Internetverbindung auf. Bei einer langsamen Internetverbindung ist der Unterschied jedoch größer. Wenn die Antwort der API fehlerhaft ist, sollte nicht mehr das Ergebnis des optimistischen Updates erscheinen, sondern der Status, der vor dem optimistischen Update gegeben war. Außerdem ist es sinnvoll, für die Nutzer eine Fehlermeldung auszugeben, ebenso wie die Möglichkeit, das Update erneut zu versuchen.
(Bild: Jackie Niam/Shutterstock.com)
Am 17. Oktober 2024 präsentiert die Online-Konferenz React 19 Day von dpunkt.verlag und iX die neuen Features der beliebten JavaScript-Bibliothek. Der Thementag im Rahmen der enterJS zeigt Teilnehmenden, wie sie das Optimum aus der neuen Version herausholen können und wie moderne Webentwicklung mit React 19 ihre Anwendungen besser macht. Auszug aus dem Programm:
- Wie Fullstack-React unser Leben verändert
- React 19 glänzt! So schön neu! Wirklich alles?
- React Compiler: Enhancing Developer Experience Without Compromising Performance
Frühbuchertickets sind bis zum 25. September verfügbar.
Implementierung optimistischer Updates am Beispiel der GitHub-API
Im Folgenden geht es um die Implementierung eines optimistischen Updates mit der JavaScript-Bibliothek React und der Apollo Client Library anhand der GitHub-API. Apollo Client ist eine State Management Library für JavaScript-Frontend-Applikationen, die es erleichtert, Daten von einer GraphQL-API abzufragen und diese abgefragten Daten lokal zu verwalten. Mit ihr lassen sich optimistische Updates besonders einfach umsetzen. Optimistische Updates sind aber auch mit ähnlichen Libraries wie urql oder bei Rest-APIs mit TanStack Query möglich. React ist eine JavaScript-Bibliothek für die Entwicklung von Benutzeroberflächen im Web. Neben der React UI Library können auch andere UI Libraries wie Angular, Vue, Svelte oder Solid verwendet werden.
Im Beispiel soll das Ziel sein, bei einem GitHub-Repository einen Stern hinzuzufügen beziehungsweise zu entfernen und die Anzahl der Sterne des Repository darzustellen und zu aktualisieren, wenn eine Nutzerin oder ein Nutzer einen Stern hinzufügt beziehungsweise entfernt.
Wer den vollständigen Code selbst testen möchte, findet ihn auf GitHub.
