Commit 3946cba5 authored by Robert Hostlowsky's avatar Robert Hostlowsky

cosmetics, linebreaks, minor typos

parent e2e1b8f1
# Grundlagen
Zuerst wollen wir in diesem Abschnitt erfahren, was GraphQL genau ist und
wie es für die Kommunikation zwischen Client und Server eingesetzt werden kann.
Im nächten Abschnitt werden wir dann einen GraphQL Server für Spotify Musik Daten implementiern.
Zuerst wollen wir in diesem Abschnitt erfahren, was GraphQL genau ist und wie es für die Kommunikation zwischen Client und Server eingesetzt werden kann.
Im nächsten Abschnitt werden wir dann einen GraphQL Server für Spotify Musik Daten implementieren.
## Was ist GraphQL?
GraphQL ist eine Spezifikation einer Client-Server-Kommunikation (über http):
* GraphQL ist eine Abfragesprache
* GraphQL ist ein zentraler Http Endpoint zur Abfrage aus verschiedenen dahinterliegenden Datenquellen
* GraphQL ist ein zentraler Http Endpoint zur Abfrage aus verschiedenen dahinter liegenden Datenquellen
Hinter der Entwicklung von GraphQL stand für Facebook das **Ziel**, eine **effiziente und flexible client-server-Kommunikation** zu ermöglichen:
......@@ -55,7 +54,7 @@ Im Gegensatz dazu werden bei REST grundsätzlich immer alle Daten einer "Ressour
Wenn beispielsweise nur ein Bild eines Künstlers angezeigt werden soll, würden auch alle anderen
Attribute mitgeschickt werden, anstatt nur ein Link zum Bild.
Als workaround könnte man einen weiteren REST Endpunkt mit genau dieser Funktionalität anbieten,
aber immer mit Extraaufwand!
aber immer mit Extra Aufwand!
Es gäbe zwar auch die Möglichkeit, zum Beispiel verschiedene Repräsentationen per mime-type Auswahl (also, z.B. json order html) anzufordern, nur liegt die Kontrolle dann immer noch auf der Serverseite!
......@@ -92,14 +91,13 @@ later -->
## GraphQL Schema
Woher weis man aber welche Attribute zu Verfügung stehen?
GraphQL besitzt ein Schema, das aus einer Liste von **Typ-Definitionen** der Entitäten
mit ihren Feldern besteht.
GraphQL besitzt ein Schema, das aus einer Liste von **Typ-Definitionen** der Entitäten mit ihren Feldern besteht.
Es ist mit einem Datenbankschema vergleichbar.
? notwendig?
> "...Man assoziiert HTTP allgemein mit REST mit "Ressourcen" als Kernkonzept.
>
> **Im Kontrast dazu steht GraphQLs konzeptuelles Model eines Entitäten-Graphen.**"
> **Im Kontrast dazu steht GraphQLs konzeptuelles Modell eines Entitäten-Graphen.**"
>
> [serving over http, (graphql.org)](http://graphql.org/learn/serving-over-http)
......@@ -166,8 +164,7 @@ app.set('port', 4000);
app.listen(port);
```
Wir starten den Server mit dem Befehl `node server.js` und
starten in einem zweiten Terminal-Fenster folgende Abfrage:
Wir starten den Server mit dem Befehl `node server.js` und starten in einem zweiten Terminal-Fenster folgende Abfrage:
```bash
curl 'http://localhost:4000/graphql' \
......@@ -188,9 +185,7 @@ Als Ergebnis bekommen wir folgendes JSON-Dokument:
In `data` steht das Ergebnis der Abfrage.
Im Fehlerfall würden die Fehler-Informationen in einem **optionalen** `error` Element stehen.
Da graphiql beim Start unseres Servers aktiviert ist(per `graphiql:true`), kann es einfach im Browser über diese Adresse
`http://localhost:4000/graphql?query={hi}`
geöffnet werden, und wir erhalten das gleiche Ergebnis:
Da graphiql beim Start unseres Servers aktiviert ist(per `graphiql:true`), kann es einfach im Browser über diese Adresse `http://localhost:4000/graphql?query={hi}` geöffnet werden, und wir erhalten das gleiche Ergebnis:
![graphiql-hi](https://blog.codecentric.de/files/2016/09/graphiql-hi.png)
......@@ -199,11 +194,9 @@ Hier können wir durch das Schema tool-gestützt SyntaxHighlighting und auch **A
![graphiql-hi-with-docs](https://blog.codecentric.de/files/2016/09/graphiql-hi-with-docs.png)
In GraphiQL kann außerdem rechts neben dem Ergebnis-Fenster die Dokumentation des Schemas aufgeklappt und angezeigt werden,
nachdem der `Docs`-Buttons gedrückt wurde.
In GraphiQL kann außerdem rechts neben dem Ergebnis-Fenster die Dokumentation des Schemas aufgeklappt und angezeigt werden, nachdem der `Docs`-Buttons gedrückt wurde.
Wir können zu unserem Schema auch einige Beschreibungen hinzufügen, die dann auch in der GraphQL 'schema inspection'/Dokumentation
rechts auftauchen, wie beispielsweise mit diesen Erweiterungen:
Wir können zu unserem Schema auch einige Beschreibungen hinzufügen, die dann auch in der GraphQL 'schema inspection'/Dokumentation rechts auftauchen, wie beispielsweise mit diesen Erweiterungen:
```javascript
const schema = new GraphQLSchema({
......@@ -227,8 +220,7 @@ const schema = new GraphQLSchema({
Nach dem Neustart des Servers steht das neue Schema in Graphiql zu Verfügung.
Das ist unsere API-Dokumentation, ähnlich wie bei z.B. Swagger, aber
mit GraphQL wird keine zusätzlicher Schritt notwendig um die Dokumentation zu generieren!
Das ist unsere API-Dokumentation, ähnlich wie bei z.B. Swagger, aber mit GraphQL ist kein zusätzlicher Schritt notwendig um die Dokumentation zu generieren!
Graphiql fragt das Schema im Hintergrund über die gleiche Schnittstelle ab.
Das Schema kann auch per GraphQL gelesen werden, so stehen zum Beispiel alle Typdefinitionen zu Verfügung!
......@@ -248,8 +240,7 @@ Hier können wir auf Flowtype zurückgreifen: [flowtype](https://flowtype.org/),
## Schema Definition - Variante 2: GraphQL SDL
Dazu lassen wir uns das bestehende Schema mit dem `printSchema`-Modul in einer der
**GraphQL SDl** Darstellung ausgeben:
Dazu lassen wir uns das bestehende Schema mit dem `printSchema`-Modul in der **GraphQL SDl** Darstellung ausgeben:
### Ausgabe als GraphQL SDL
......
# Intro
Wer an Board von Flugzeugen Internet-Zugänge über eine Sateliten-Verbingung genutzt hat, musste feststellen, dass dabei die höheren Antwortzeiten sofort negativ spürbar werden. Selbst das Browsen von Internetseiten in Mobilfunknetzen fühlt sich "schneller" an.
Wer an Bord eines Flugzeugs Internet-Zugang über eine Satelliten-Verbindung genutzt hat, musste feststellen, dass dabei die höheren Antwortzeiten sofort negativ spürbar werden. Selbst das Browsen von Internetseiten fühlt sich in Mobilfunknetzen schneller an
Es sind solche Netzwerkbedingungen, die eine angepasste Kommunikation erfordern.
Facebook hat dafür GraphQL entwickelt, um auch bei solchen schlechten Verbindungen eine angenehme Bedienung der Facebook App zu ermöglichen, und setzt es seit 2012 produktiv ein.
Tatsächlich wurde 2015 eine ausführliche Spezifikation veröffentlicht (siehe [graphql.org](http://graphql.org)) auf deren Basis sich dann ein großes Ökosystem an Bibliotheken und Tools für verschiedene Programmiersprachen für Server und Client entwickelt hat.
......
......@@ -42,8 +42,7 @@ type Query {
export default schema;
```
Hier kann uns das
[GraphQL schema cheatsheet](https://github.com/sogko/graphql-schema-language-cheat-sheet) von Hafiz Ismail helfen.
Hier kann uns das [GraphQL schema cheatsheet](https://github.com/sogko/graphql-schema-language-cheat-sheet) von Hafiz Ismail helfen.
Wir definierten hier konkrete **Typen**, und auch ihre **Beziehungen**, um die Struktur unseres
Entitäten-Graphen aufzubauen:
......@@ -198,10 +197,9 @@ const fetchArtistsByName = (name) => {
Mit den Informationen in der rohen JSON-Antwort müssen wir die Liste der `Artist`s per `toArtist ()` füllen und transformieren:
Zum Beispiel:
* Die Liste der Images von Spotify wird so reduziert, dass im `image`-Feld nur noch ein leerer String oder eine URL des ersten Bildes steht.
* Die Liste der Images von Spotify wird so reduziert, dass im `image`-Feld nur noch ein leerer String oder eine URL des ersten Bildes steht.
* Der Rückgabewert für `albums` ist eine Funktion, die nur dann aufgerufen wird, wenn tatsächlich `albums` in der GraphQL-Abfrage angefordert wird!
* Alle anderen Felder mit dem gleichen Namen **wie im Schema** werden dann **automatisch** übernommen, alle anderen ignoriert.
```javascript
......
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