Commit 9e9dc640 authored by Robert Hostlowsky's avatar Robert Hostlowsky

kleine Umformulierungen oder Typos

parent 31d9ed76
......@@ -4,32 +4,30 @@ In diesem Teil werden wir den Server aus Teil 1 nutzen, um Spotify Daten auf ein
<!--![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 :-)__
-->
Als ich neulich an Board eines Flugzeuges einen Internetzugang über eine Sateliten-Verbingung nutzen konnte, war ich überrascht, wie sich "Internet anfühlt", wenn Antwortzeiten deutlich spürbar werden.
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.
<!--
~~Hier ist mir auch sofort eingefallen, dass ein n+1 REST Ansatz im Web-Client hier eine schlechte Wahl ist, aber dieses Problem auf einfache Art mit GraphQL gelöst, indem nur ein Austausch notwendig ist.~~
GraphQL im Client:
* einfach zu integrieren
* speed up durch Schema
* speed up durch built-in Schema
-->
In diesem Artikel soll gezeigt werden, wie einfach die **Client-seitige Entwicklung** mit GraphQL in der **Zwischenschicht** ist.
Es kann die Front- und Backend- Teams helfen, einen **technischen Kontrakt** festzulegen, und den Kommunikations - overhead zu verringern.
Es kann die Front- und Backend- Teams helfen, einen **technischen Kontrakt** festzulegen, und den Kommunikations-Overhead zu verringern.
~~Man denke nur an eine große Anwendung mit vielen (Domain-) Typen und vielen Schnittstellen zu verschieden Teams!!!~~
(siehe Teil 1: Automatische Schema Dokumentation und Playground)
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 *schlechtem Netzverbindungen* umgehen, würde aber erhöhte Komplexität und eine höhere Lernkurve mitbringen, und soll deshalb in einem späteren Blog beleuchtet werden soll...
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 soll deshalb in einem späteren Blog beleuchtet werden soll...
Als **Beispiel** soll uns eine App zur Abfrage der Spotify Musikdatenbank dienen:
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.
......@@ -40,7 +38,7 @@ Für eine schnelle Umsetzung - in wenigen Minuten - können wir Expo, also React
## Apollo Grundlagen
Mit Apollo werden die Daten, ähnlich wie bei `redux`, in einem Cache oder State gehalten, und per
HOC (Higher-Order-Component) Ansatz die UI Komponenten an diesen State ge koppelt werden.
HOC (Higher-Order-Component) Ansatz die UI Komponenten an diesen State gekoppelt und gefüllt werden.
Das ermöglicht es, die Verbindung zum Server an zentraler Stelle zu deklarieren.
Apollo 1 basierte und verwendete noch direkt `redux`, aber seit Apollo 2 wurde es unabhängig von einem `redux-store`
und eine bessere Modularisierung macht die es insgesamt schlanker.
......@@ -88,21 +86,21 @@ ReactDOM.render(
);
```
#### Definition der GraphQL Operation per graphql-tag
#### GraphQL "operation"
Für jede UI Komponente, die per GraphQL gefüllt wird, sieht das Muster folgendermaßen aus:
```javascript
import gql from 'graphql-tag';
let UIComponentWithData = graphql(
gql`{ ... }`, // ES6 template string
config, // optional
gql`{ ... }`, // ES6 template mit GraphQL operation, also query, mutation oder subscription
config, // optional
)(UIComponent);
export { UIComponentWithData };
```
#### Definition GraphQL Query Variablen per Konfigurationsobjekt
#### GraphQL Query Variablen konfigurieren
Mit dem `config` Parameter kann mann die Query Variablen setzen, z.B.
wird hier aus den React Komponenten `props` das `name` Feld genutzt, um
......@@ -131,14 +129,14 @@ werden kann, zum Beispiel so:
Die Schritte für die Umsetzung in unserem Spotify Beispiel:
* Tools installation: node.js, expo, iOS simulator oder client auf Smartphone
* Tool installation: node.js, expo, iOS simulator oder client auf Smartphone
* Bei Expo.io Registrieren und Anmelden
* Projekt initialisieren
* Einfache UI und Styling anpassen
* Vorbereitung der Datenabfrage mit graphIql
* Verbindung zum Server und Verknüpfung mit Datenkomponente
## Tools installation: node.js, expo, iOS simulator oder client auf nativem Gerät
## Extra: Expo als Entwicklungsumgebung, mit Android/iOS simulator oder client auf Smartphone
## Projekt initialisieren
......@@ -180,7 +178,7 @@ XXX screenshot
## Anpassung der UI
Die generierte Seite muss noch abgeändert werden:
1. Wir verschieben `app.js` nach `main.js`
Wir verschieben `app.js` nach `main.js`
```javascript
// app.js
......@@ -206,7 +204,8 @@ const styles = StyleSheet.create({
},
});
```
und ersetzend die Zeile `1,alt`:
und ersetzend die Zeile `1,alt` mit
```javascript
<Artists /> // 1, neu
```
......@@ -214,8 +213,8 @@ XXX und fügen Zeile für den Import hinzu:
#### Komponente: Liste der Künstler
// MainComponent.js
```javascript
// MainComponent.js
const Artists = ({artists = []}) => (
<View>
{
......@@ -283,10 +282,11 @@ export default class App extends React.Component {
```
## Fortsetzung
* Weitere Verschachtelung,
* Alben
* Mutation
* Laden / Anzeigen der Liste der Alben pro Künstler
* Änderungen per `mutation`: einen Künstler `liken`
* Optimistic UI
* Caching
* subscription
# Zusammenfassung
? subscription
......@@ -80,8 +80,7 @@ const app = express ();
app.use('/graphql', expressGraphQL(req => ({
schema,
graphiql: true,
pretty: true
graphiql: true
})));
app.set('port', 4000);
......@@ -153,7 +152,7 @@ Als Ergebnis bekommen wir folgendes JSON-Dokument:
In `data` steht das Ergebnis der Abfrage. Mögliche Fehler-Informationen würden in einem **optionalen**
`error` Element stehen.
Da graphiql beim Start des Servers aktiviert ist(per `graphiql:true`), kann es einfach im Browser über diese Adresse
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:
......@@ -190,8 +189,6 @@ const schema = new GraphQLSchema({
type: StringType,
resolve: () => 'Hello world!'
// oder einfach konstanter Wert:
// resolve: 'Hello world!'
}
}
})
......@@ -204,8 +201,8 @@ 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.
Aktualisierung funktioniert immer automatisch, ohne zusätzlich manuell eine Dokumentation generieren zu müssen!
Graphiql fragt das Schema im Hintergrund über die gleiche Schnittstelle ab, denn selbst das Schema kann immer
auch selbst gelesen werden, es stehen zum Beispiel alle Typdefinitionen zu verfügung.
Graphiql fragt das Schema im Hintergrund über die gleiche Schnittstelle ab, denn das Schema kann immer
auch gelesen werden, es stehen zum Beispiel alle Typdefinitionen zu verfügung.
Man kann das eingebaute Schema direkt abrufen, zum Beispiel mit `curl`:
......@@ -217,7 +214,7 @@ curl 'http://localhost:4000/graphql' \
Es erzeugt ein relativ langes, "für Maschinen lesbares" JSON-Dokument, das aber für uns nicht
einfach zu lesen oder zu verstehen ist.
## Schema Definition - Variante 2: Schema IDL
## Schema Definition - Variante 2: Schema IDL /SDL
**GraphQL Schema IDL**: Interface Definition Language
oder auch einfach
......@@ -229,7 +226,7 @@ oder auch einfach
Wir können uns dazu mit dem `printSchema`-Modul eine Darstellung
als **GraphQL SDL** generieren lassen, die uns eine klare, kompakte und lesbare Ausgabe erzeugt:
Mit der bestehenden Schema kann man sie so erstellen:
Mit dem bestehenden Schema von oben kann man sie so erstellen:
```javascript
// data/printSchema.js
......@@ -251,7 +248,7 @@ type Query {
Vielleicht können sie das gleiche Format erkennen, wie es bei der Definition von
Typen in [flowtype](https://flowtype.org/) verwendet wird (Typ-Annotationen für JavaScript)
### Definition per GraphQL SDL per `buildSchema`
### Schema Definition per GraphQL SDL
Wir können dieses Format sogar als einen kürzerer Ansatz zur Definition unseres Schemas im Server
verwenden!
......@@ -264,7 +261,7 @@ import { buildSchema } from 'graphql';
const schema = buildSchema(`
#
# "Die Wurzel aller Anfragen."
# "Wurzelknoten"
#
type Query {
# Gibt einfach nur "Hello world!" zurück'
......@@ -275,8 +272,7 @@ type Query {
export default schema;
```
Neben der Schema-Typdefinition müssen wir natürlich auch die Logik implementieren, um es mit Werten
zu füllen, oder konkrete Werte zurückzugeben.
Neben der Schema-Typdefinition müssen wir natürlich auch die Logik implementieren, um konkrete Werte zurückzugeben.
Im Server wird dazu die Definition des Wurzelknotens per `rootValue` bereitgestellt, von dem
aus alle anderen Knoten erreicht werden. Dazu müssen nur sogenannte `resolver` hinzugefügt werden,
......@@ -293,8 +289,7 @@ app.use('/graphql', expressGraphQL(req => ({
hi: () => 'Hello world!'
},
graphiql: true,
pretty: true
graphiql: true
})));
```
......
**STILL WIP** , just a collections of ideas...
# Intro
GitHub ermöglicht seit 2016 auf seine umfangreiche [API per GraphQL zuzugreifen](https://githubengineering.com/the-github-graphql-api/).
......@@ -5,22 +7,22 @@ Auch die [New York Times verwendet GraphQL](https://open.nytimes.com/react-relay
In diesem Artikel wird ein GraphQL Server - [spotify-graphql-server on Github](https://github.com/lowsky/spotify-graphql-server) -
für den Zugriff auf Spotify entwickelt.
# gql?
# gql? Why?
2 years ago, gql?
a lot of news about gql,
* GitHub API, new york times...
Open source seit 2015
Neben der Referenzimplementierung von Facebook, sind viele Bibiliotheken für verschiedene Programmiersprachen entstanden. [awesome]
Neben der Referenz-implementierung von Facebook, sind viele Bibliotheken für verschiedene Programmiersprachen entstanden. [awesome]
Warum sollten wir uns das genauer ansehen?
* netzwerk: overfetching, round-trips
* netzwerk: over-fetching, round-trips
* viele Client Versionen
* REST standard, aber ...
* wäre es nicht super, wenn beim Austausch automatisch
* * geprüft wird, ob die Daten vom Server im richtigen Fromat
* * das nicht per schema validierung (jsonschema), funktioniert client seitig, aber
* * geprüft wird, ob die Daten vom Server im richtigen Format
* * das nicht per schema Validierung (z.B. per JsonSchema), funktioniert client seitig, aber
* * server - seitig: alte clients
In diesem Artikel werden wir uns
......@@ -29,7 +31,7 @@ anhand eines einfachen Beispiels für Spotify Musik Daten einem eigenen Server i
und Nutzung in einem Web client nutzen
eine existierende Platform
und sehen,
wie in bestehendes System integrieret werden kann
wie in bestehendes System integriert werden kann
Grundlagen...
......
......@@ -13,9 +13,9 @@ In diesem Artikel wird beschrieben, wie wir beispielhaft einen **einfachen Serve
# Praxisbeispiel
## Schema für unsere Spotify-Daten
## Schema für das Spotify-Beispiel
Wir werden im nächsten Schritt ein Schema für unser Beispiel für Spotify-Daten entwerfen und nutzen.
......@@ -30,7 +30,6 @@ import { buildSchema } from 'graphql';
const schema = buildSchema(`
#
# Einfacher Start:
# Wir verwenden hier nur einen Teil der Informationen, die Spotify API zu Verfügung stellt
# z.B. von https://api.spotify.com/v1/artists/3t5xRXzsuZmMDkQzgOX35S
# Bei Bedarf kann dieses Schema also um weitere Felder erweitert werden
......
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