Commit 45c2904e authored by Robert Hostlowsky's avatar Robert Hostlowsky

Client überarbeitet.

parent 6eac906f
# Introduction
Sobald wir einen Client hinzufügen, werden die Vorteile von GraphQL noch sichtbarer.
Wir werden die Spotify Daten auf einem Mobilen Gerät in einer React-Native-App zu laden.
# GraphQL im Client: Introduction
Sobald wir einen GraphQL Client zu unserem Server hinzufügen, werden die Vorteile von GraphQL noch leichter sichtbar.
Wir werden sehen, wie
* leicht der GraphQL im Client hinzugefügt werden kann
* leicht die UI Komponenten erweitert werden können
* GraphQL zum deklarativem Ansatz von React passt
* wie durch Nutzung von GraphIql eine schnelle Umsetzung möglich ist
Wir werden dazu Spotify Daten auf einem Mobilen Gerät in einer React-Native-App zu laden.
<!--![client im iOS Simulator](https://blog.codecentric.de/files/2017/11/spotify-expo-artists-marilyn.png)__Teaser :-)__
-->
<img width="100" src="https://blog.codecentric.de/files/2017/11/spotify-expo-artists-marilyn.png"/>__Teaser :-)__
GraphQL im Client:
* einfach zu integrieren
* speed up durch built-in Schema
<!--
Als ich neulich an Board eines Flugzeuges einen Internet-Zugang über eine Sateliten-Verbingung nutzen konnte, war ich überrascht, wie sich "Internet anfühlt", wenn Antwortzeiten deutlich spürbar werden.
Selbst heutige Mobilfunkverbindung fühlen sich gewöhnlich schneller an...
Es ist aber nicht die Übertragung, denn sie ist schnell, sondern die Verzögerungen bis zum Verbindungsaufbau und bis zur eintreffenden Antwort.
-->
- ? Als **Beispiel** soll uns eine App zur Abfrage der Spotify Musik Datenbank dienen:
Für eine schnelle Umsetzung - in wenigen Minuten - können wir Expo, also React Native.
- ? Architektur: vom Client aus gibt es nur noch eine Abhängigkeit zu einem Server Endpoint, die Schnittstelle ist durch ein Schema festgelegt, validierbar.
Es kann die Front- und Backend- Teams helfen, einen **technischen Kontrakt** festzulegen, und den Kommunikations-Overhead zu verringern.
(siehe Teil 1: Automatische Schema Dokumentation und Playground)
- ? Trennung der Aspekt wie Fetching, Error handling und Caching ausserhalb der Business Logik -
- ? Sogenannte Colocation ermöglicht, das Mapping und das Festlegen, was geladen werden soll
Bibliothek/Integration:
### Bibliothek/Integration
Wir werden die **Apollo 2 Client Bibliothek** verwenden, die leichter einzusetzen ist, als
Facebooks eigene Bibliothek **"Relay"**. Relay kann zwar noch leistungsfähiger mit *schlechten Netzverbindungen* umgehen,
würde aber mehr Komplexität und eine höhere Lernkurve mitbringen, und auch das Schema müsste daraufhin erweitert und angepasst werden.
Als **Beispiel** soll uns eine App zur Abfrage der Spotify Musik Datenbank dienen:
Für eine schnelle Umsetzung - in wenigen Minuten - können wir Expo, also React Native.
- Architektur: vom Client aus gibt es nur noch eine Abhängigkeit zu einem Server Endpoint, die Schnittstelle ist durch ein Schema festgelegt, validierbar.
<!--
?? Trennung der Aspekt wie Fetching, Error handling und Caching ausserhalb der Business Logik Sogenannte Colocation ermöglicht, das Mapping und das Festlegen, was geladen werden soll
-->
# GraphQL im client mit Apollo und React
## Apollo Grundlagen
......@@ -40,19 +38,17 @@ Apollo Version 1 verwendete noch direkt `redux` und baute darauf auf, aber mit V
und bringt eine vebesserte Modularisierung mit sich.
Diese Komponenten stehen zur Verfügung:
* ApolloClient: Verbindung von Cache und Netzwerk Stack/Link
* ApolloInMemoryCache: (default cache) Client seitiger GraphQL Cache mit Normalisierung
* ApolloLink: Netzwerk Verbindung und Schnittstelle zum GraphQL Server
* InMemoryCache: Client seitiger GraphQL Cache
* ApolloProvider XXX ...
* ApolloProvider: Verbindung zwischen ApolloClient und den Komponenten in der Komponenten-Hierarchie
Durch die neuen Komponenten, wird es möglich, zum Beispiel eine Offline-Unterstützung hinzuzufügen.
?? Durch die neuen Komponenten, wird es möglich, zum Beispiel eine Offline-Unterstützung hinzuzufügen.
Tatsächlich implementiert zum Beispiel Amazon AsyncApp eine eigene Implementierung des Caches auf Basis der redux-offline Bibliothek zur Offline Fähigkeit.
#### Installation der Bibliotheken und Benutzung in React
Das Muster für jede UI Komponente, die per GraphQL gefüllt wird, ist einfach
Nach Installation folgender Bibliotheken mit
```bash
......@@ -268,3 +264,9 @@ und verwenden `<ArtistsWithData>` anstatt `<Artists>`
* subscription
# Zusammenfassung
* **Tool-Support** in IDE / eslint
* "schnell"
* wartbarkeit
* Es kann die Front- und Backend- Teams helfen, einen **technischen Kontrakt** festzulegen, und den Kommunikations-Overhead zu verringern.
* (siehe Teil 1: Automatische Schema Dokumentation und Playground)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment