Apollo für React und GraphQL

Ziele

Diese Schulung bringt Entwickler auf den neuesten Stand der modernen JavaScript-Webapplikationsentwicklung mit dem React & GraphQL Framework Apollo.

Die Verwendung von Apollo für die Entwicklung von React- und GraphQL-Anwendungen kann Ihrer Anwendung enorme Vorteile bringen, wie z.B. die Verwendung von GraphQL-Fragmenten zur Deklaration der von Komponenten benötigten Daten, die Zusammenführung dieser Fragmente mit den Komponenten, die Unterstützung von Mutationen und die Logik zum Abrufen und Zwischenspeichern von Daten im Apollo-Speicher.

Der Kurs beginnt damit, wie GraphQL-APIs und React-Komponenten in Apollo integriert werden. Der Kurs gipfelt dann in einem Gruppenprojekt, in dem die Themen des Kurses in einem praktischen Kontext angewendet werden, mit einer Klassenpräsentation und einem Code-Review, um die Beherrschung sicherzustellen. Der Kurs schließt mit einer Lektion zum Vergleichen und Debuggen ab.

Zielgruppe

Bestehende React-Entwickler, die eine andere API und Infrastruktur für die Nutzung von Daten im Frontend wünschen.

Voraussetzungen

Vorkenntnisse und praktische Erfahrungen mit Modern JavaScript, GraphQL und React werden für diesen Kurs vorausgesetzt.

Agenda

Einführung

• Apollo
• Apollo im Vergleich zu Flux, Redux und Relay
• Vorteile von GraphQL, React und Apollo

Apollo-Server

• Konfigurieren von Apollo Server mit Express
• GraphQL Schema Definition Language
• GraphQL Type System
• Apollo Engine
• Apollo Data Connector

Anbindung von React an GraphQL

• -Einrichten der Apollo Netzwerkumgebung
• -Übergabe von Custom Headern an den GraphQL Server
• -Verwendung des Apollo Providers zur Verbindung von GraphQL mit React
• -Unterbringung der GraphQL Abfrage mit der React Komponente
• -Verwendung der Query Component
• -Umgang mit Loading und Error States
• -Verstehen des GraphQL Cache

Erweitern des Komponentenbaums

• Verwendung von Fragmenten
• Schreiben von GraphQL-Fragmenten
• Verknüpfen von Fragmenten von einem Child zu einem Parent
• Verschachteln von vielen Fragment-Containern
• Untersuchen von Apollo GraphQL-Requests und State mit Hilfe von Tooling
• Higher Order Components mit der GraphQL-Function

Collection of Data

• GraphQL und Datensammlungen
• Offset vs. Cursor-basierte Pagination
• Incremental Loading
• Connection Directive

Performing Mutations

• Arten von Mutationen: Add, Delete and Update Node
• Verstehen von GraphQL jenseits von CRUD-Operations
• Konfigurieren von Mutationen innerhalb vom Apollo Server
• Konfigurieren von Mutationen innerhalb vom Apollo Client
• Store Updates, Optimistic Responses
• Handling Errors aus Failed Mutations

Erweiterte Funktionen

• Verwendung von Interface- und Union-Typen
• Pre-fetching Data