...
 
Commits (2)
# 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)
......@@ -26,13 +26,20 @@ Warum sollten wir uns das genauer ansehen?
* * server - seitig: alte clients
In diesem Artikel werden wir uns
kurz die Grundlagen und die idealen Use-Cases und Anwendungsfelder ansehen
anhand eines einfachen Beispiels für Spotify Musik Daten einem eigenen Server implementieren,
und Nutzung in einem Web client nutzen
eine existierende Platform
und sehen,
wie in bestehendes System integriert werden kann
* kurz die Grundlagen und die idealen Use-Cases und Anwendungsfelder ansehen
* anhand eines einfachen Beispiels für Spotify Musik Daten einem eigenen Server implementieren
(GraphQL GATEWAY)
* Nutzung in einem client
* ? eine existierende Platform
* und sehen, wie in bestehendes System integriert werden kann
Grundlagen...
----
Story für Einleitung: ???
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.
Es soll gezeigt werden,
* wie ein einfacher Server mit GraphQL-Schnittstelle aufgesetzt werden kann,
* welche weitere Schritte nötig sind, um die Daten von der Spotify API zu laden und
sie dann per GraphQL zu Verfügung zu stellen.
<img src="https://blog.codecentric.de/files/2016/09/simpspot.png" width="300" />
<imgx src="https://blog.codecentric.de/files/2016/09/simpspot.png" width="300" />
[GraphQL basierender Spotify client - screenshot](https://blog.codecentric.de/files/2016/09/simpspot
Einfacher Spotify Web Client, der mit unserem GraphQL Server arbeitet
......@@ -22,7 +23,7 @@ Wir werden im nächsten Schritt ein Schema für unser Beispiel für Spotify-Date
> "Die grundlegenden Komponenten eines GraphQL-Schemas sind Objekttypen, die
> eine bestimmte Art von Objekt mit seinen Feldern darstellen, wie sie von
> einem [REST] Server abgefragt werden können"
Aus [Schemas und Typen](http://graphql.org/learn/schema/)
> Aus [Schemas und Typen, (graphql.org)](http://graphql.org/learn/schema/)
```javascript
// data/schema.js
......@@ -94,13 +95,11 @@ erreicht werden: `Query->Artist->Album ->Track`
### Schnellstart mit Mocking Server
Mit den vielen Informationen, die bereits im Schema stecken, kann man es direkt verwenden, um Beispieldaten für
den Betrieb mit einem Mock-Servers zu modellieren.
Mit den vielen Informationen, die bereits im Schema stecken, kann man es direkt verwenden, um Beispieldaten für den Betrieb mit einem Mock-Servers zu modellieren.
So kann man alle "Strings" oder Zahlen mit Zufallswerten befüllen, und erhält grundsätzlich Daten mit
den gleichen Strukturen...
Um dies zu demonstrieren, verwenden wir den `mockServer` aus der `graphql-tools` Bibliothek und erzeugen
dynamische Dummy-Daten:
Um dies zu demonstrieren, verwenden wir den `mockServer` aus der `graphql-tools` Bibliothek und erzeugen dynamische Dummy-Daten:
```javascript
// test/schemaTest.js
......@@ -196,16 +195,16 @@ app.use('/graphql', expressGraphQL(req => ({
Hinweis: Alternativ hätten wir diese Logik auch direkt in die Schema Definition 1 hinzufügen können.
Dadurch würde die Logik für die Datenabfrage mit der Typdefinitionen gemischt wird.
Ich bevorzuge deshalb die zweite Variante der Schema-Definition, denn dabei lässt sich der Logikanteil besser
Unit Tests und getrennt weiter entwickeln.
Ich bevorzuge deshalb die zweite Variante der Schema-Definition, denn dabei lässt sich der Logikanteil besser mit Unit-Tests versehen und die Schema-Definition bleibt überschaubarer.
```javascript
import fetch from 'node-fetch';
const fetchArtistsByName = (name) => {
const headers = {
"Accept": "application/json",
"Authorization": "Bearer BQBg2HM1Q..."
"Accept": "application/json",
"Authorization": "Bearer BQBg2HM1Q..." // siehe interactive API console
// https://developer.spotify.com/web-api/console/
};
return fetch(`https://api.spotify.com/v1/search?q=${name}&type=artist`, {headers})
......@@ -226,14 +225,11 @@ const fetchArtistsByName = (name) => {
Mit den Informationen in der rohen JSON-Antwort müssen wir die Liste der `Artist`s per `toArtist ()` transformieren:
* So wird hier die Liste der Images so reduziert, dass im `image`-Feld nur noch ein leerer String oder eine URL
des ersten Bildes steht.
* So wird hier die Liste der Images so reduziert, dass im `image`-Feld nur noch ein leerer String oder eine URL des ersten Bildes steht.
* Alle anderen Felder mit dem gleichen Namen **wie im Schema** werden dann **automatisch** übernommen, alle
anderen ignoriert.
* Alle anderen Felder mit dem gleichen Namen **wie im Schema** werden dann **automatisch** übernommen, alle anderen ignoriert.
* Der Rückgabewert für `albums` ist eine Funktion, die nur dann aufgerufen wird, wenn tatsächlich `albums` in
der GraphQL-Abfrage angefordert wird.
* Der Rückgabewert für `albums` ist eine Funktion, die nur dann aufgerufen wird, wenn tatsächlich `albums` in der GraphQL-Abfrage angefordert wird.
```javascript
const toArtist = (raw) => {
......@@ -260,8 +256,8 @@ const toArtist = (raw) => {
```
# Zusammenfassung GraphQL Server
Wir haben unseren eigenen GraphQL-Server erstellt, der uns grundlegende Informationen vom Spotify-API-Server
lädt. Jetzt können wir mit dem Laden der Daten zu einem Künstler in Graphiql beginnen:
Wir haben unseren eigenen GraphQL-Server erstellt, der uns grundlegende Informationen vom Spotify-API-Server lädt. Jetzt können wir mit dem Laden der Daten zu einem Künstler in Graphiql beginnen:
Beim Aufruf über direktem Link von unserem lokalen Server
[http://localhost:4000/graphql?query=%7B%0A%20%20queryArtists....](http://localhost:4000/graphql?query=%7B%0A%20%20queryArtists%20%0A%20%20%20%20%20(byName%3A%22Red%20Hot%20Chili%20Peppers%22)%20%0A%20%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%7D%0A)
oder von der Live Demo
......
......@@ -25,6 +25,7 @@ ohne viel Aufwand, kann dieser Schritt ausprobiert werden!
In weiteren **Blog-Artikeln** werden wir herausfinden, wie wir zum Beispiel
* die Leistung durch Caching auf der **Server**-Seite mit [dataLoader](https://github.com/facebook/dataloader)
verbessern können,
* das optimierte [Relay](https://facebook.github.io/relay/)
......