Commit 67978148 authored by Robert Hostlowsky's avatar Robert Hostlowsky

Formatierungen

parent 45c2904e
......@@ -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/)
......
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