Relay und GraphQL

Ziele

Erkundigen Sie sich, wie Sie Relay mit GraphQL im Kontext von React-Anwendungen verwenden können. Die Schulung Relay & GraphQL soll Ihnen behilflich sein, wie man Relay mit GraphQL im Kontext von React-Anwendungen einsetzt. Der Kurs beginnt mit Vorlesungen und Übungen zur Erstellung von GraphQL-Anfragen und zum Verständnis von Relay-Konzepten wie Fragmenten, Variablen und Callbacks. Anschließend werden Relay-Konzepte wie Slicing, Paginierung und Datenabruf erforscht. Das Seminar endet mit einem detailierten Einblick in Relay-Mutationen, einschließlich der Arbeit mit optimistischen Updates und Fat-Queries.

Zielgruppe

Entwickler mit einiger Erfahrung in der Entwicklung von React-Komponenten

Voraussetzungen

Bitte Ergänzen

Agenda

Einführung

• Demand Driven Architektur vs. REST
• GraphQL und Relay

GraphQL-Anfragen stellen

• Senden von Abfragen
• Abfragen definieren
• Types
• Query Parameter
• Fragmente
• Wie ein GraphQL Server auf Abfragen antwortet

Relay Konzepte

• Container, Fragmente, Root Container und Routs
• Interne Architektur Client-seitiger Cache

Erste Schritte mit Relay

• Relay-Container-Zusammensetzung
• Fragmente und Variablen benennen
• Variablen an Fragmente übergeben
• Relay-Variablen setzen und verwenden
• Bedingte Felder mit @include und @skip
• Debuggen von Netzwerkanfragen
• Render-Callbacks

Slicing und Paginierung

• Relay-Unterstützung in GraphQL
  • Cursors, Slicing und Paginieren von Daten mit Connections
  • Edges und PageInfo
• Navigieren/Paginieren von One-to-Many-Beziehungen

Abfragen über Relay

• Re-fetching, das Node Interface und globale 'id's
• Das Node Root Feld
• Denken in Graphen

Daten abrufen

• Datenabruf und Bereitschaftsstatus
• Bereitschaftsstatusereignisse nutzen
• Serverfehler behandeln
• Abruf erzwingen

Mutationen

• Mutationsmuster des Relay
• Handhabung von Mutationen
• Optimistische Aktualisierungen und fette Abfragen
• Mutator-Konfigurationen & Aktualisierung des Client-Speicherbereichs
• Verhaltensweisen
  • Hinzufügen eines Elements
  • Ändern eines Elements
  • Löschen eines Elements