Introduction to GraphQL

Introduction
Origin
History
Usage
Alternatives & useful tools
End
GraphQL
Piotr Sroczkowski
Brainhub
January 23, 2017
Piotr Sroczkowski GraphQL

Introduction
Origin
History
Usage
End
Summary I
1 Introduction
2 Origin
DIP
Semantic triple
3 History
4 Usage
How to setup a GraphQL server?
Syntax
Types
Best practices
5 Alternatives & useful tools
6 End

Introduction
Origin
History
Usage
End
What is GraphQL?

Introduction
Origin
History
Usage
End
What is GraphQL?
Graph query language

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Dependency inversion principle (DIP)

Introduction
Origin
History
Usage
End
DIP
Semantic triple
one of SOLID principles

Introduction
Origin
History
Usage
End
DIP
Semantic triple
depend on abstraction, not concretion

Introduction
Origin
History
Usage
End
DIP
Semantic triple
IMO even abstract class breaks this rule

Introduction
Origin
History
Usage
End
DIP
Semantic triple
IMO even abstract class breaks this rule
so we should depend only on interfaces

Introduction
Origin
History
Usage
End
DIP
Semantic triple
DIP in services

Introduction
Origin
History
Usage
End
DIP
Semantic triple
DIP in services
DIP is not only in OOP

Introduction
Origin
History
Usage
End
DIP
Semantic triple
DIP in services
also in SOA

Introduction
Origin
History
Usage
End
DIP
Semantic triple
DIP in services
also in SOA
it’s like joining blocks together

Introduction
Origin
History
Usage
End
DIP
Semantic triple
DIP in microservices

Introduction
Origin
History
Usage
End
DIP
Semantic triple
it’s not a new paradigm, it’s just an example of SOA

Introduction
Origin
History
Usage
End
DIP
Semantic triple
it’s not a new paradigm, it’s just an example of SOA
service discovery

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Semantic triple

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Semantic triple
an RDF (Resouce Description Framework) data model

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Semantic triple
an RDF (Resouce Description Framework) data model
ex. Alice likes Bob

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Triplestore

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Triplestore
a proposed database for storage of triples

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Think in graphs

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Think in graphs
Why?

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Think in graphs
Why?
UI

Introduction
Origin
History
Usage
End
DIP
Semantic triple
Think in graphs
Why?
UI
Graph algorithms

Introduction
Origin
History
Usage
End
GraphQL history

Introduction
Origin
History
Usage
End
GraphQL history
developed internally in Facebook in 2012

Introduction
Origin
History
Usage
End
GraphQL history
developed internally in Facebook in 2012
publicly released in 2015

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Node

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Node
express-graphql
https://github.com/graphql/express-graphql

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Node
express-graphql
https://github.com/graphql/express-graphql
or graphql-server
https://github.com/apollostack/graphql-server

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
The simplest way
1 git clone https:// github.com/apollostack/apollo -
→ starter -kit
2 cd apollo -starter -kit
3 git checkout server -only
4 npm install
5 npm start

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Queries

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Queries
1 {
2 hero {
3 name
4 }
5 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Queries
1 {
2 hero {
3 name
4 }
5 }
1 {
2 "data": {
3 "hero": {
4 "name": "R2 -D2"
5 }
6 }
7 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Queries
1 {
2 human(id: "1000") {
3 name
4 height
5 }
6 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Queries
1 {
2 human(id: "1000") {
3 name
4 height
5 }
6 }
1 {
2 "data": {
3 "human": {
4 "name": "Luke Skywalker",
5 "height": 1.72
6 }
7 }
8 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Aliases

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Aliases
1 {
2 empireHero: hero(episode: EMPIRE) {
3 name
4 }
5 jediHero: hero(episode: JEDI) {
6 name
7 }
8 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Aliases
1 {
2 empireHero: hero(episode: EMPIRE) {
3 name
4 }
5 jediHero: hero(episode: JEDI) {
6 name
7 }
8 }
1 {
2 "data": {
3 "empireHero": {
4 "name": "Luke Skywalker"
5 },
6 "jediHero": {
7 "name": "R2 -D2"
8 }
9 } Piotr Sroczkowski GraphQL

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Fragments - input
1 {
2 leftComparison: hero(episode: EMPIRE) {
3 ... comparisonFields
4 }
5 rightComparison : hero(episode: JEDI) {
6 ... comparisonFields
7 }
8 }
9
10 fragment comparisonFields on Character {
11 name
12 appearsIn
13 friends {
14 name
15 }
16 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Fragments - output I
1 {
2 "data": {
3 " leftComparison": {
4 "name": "Luke Skywalker",
5 "appearsIn": [
6 "NEWHOPE",
7 "EMPIRE",
8 "JEDI"
9 ],
10 "friends": [
11 {
12 "name": "Han Solo"
13 },
14 {
15 "name": "Leia Organa"

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Fragments - output II
16 },
17 {
18 "name": "C-3PO"
19 },
20 {
21 "name": "R2 -D2"
22 }
23 ]
24 },
25 " rightComparison ": {
26 "name": "R2 -D2",
27 "appearsIn": [
28 "NEWHOPE",
29 "EMPIRE",
30 "JEDI"
31 ],

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Fragments - output III
32 "friends": [
33 {
35 },
36 {
38 },
39 {
41 }
42 ]
43 }
44 }
45 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Variables - input I
1 query HeroNameAndFriends ($episode: Episode) {
2 hero(episode: $episode) {
3 name
4 friends {
5 name
6 }
7 }
8 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Variables - output I
1 {
2 "data": {
3 "hero": {
4 "name": "R2 -D2",
5 "friends": [
6 {
8 },
9 {
11 },
12 {
14 }
15 ]

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Variables - output II
16 }
17 }
18 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Directives I
1 query Hero($episode: Episode , $withFriends: Boolean !)
→ {
2 hero(episode: $episode) {
3 name
4 friends @include(if: $withFriends) {
5 name
6 }
7 }
8 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Mutations I
1 mutation CreateReviewForEpisode ($ep: Episode!, $review
→ : ReviewInput !) {
2 createReview(episode: $ep , review: $review) {
3 stars
4 commentary
5 }
6 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Inline fragments I
1 query HeroForEpisode ($ep: Episode !) {
2 hero(episode: $ep) {
3 name
4 ... on Droid {
5 primaryFunction
6 }
7 ... on Human {
8 height
9 }
10 }
11 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Meta ﬁelds I
1 {
2 search(text: "an") {
3 __typename
4 ... on Human {
5 name
6 }
7 ... on Droid {
8 name
9 }
10 ... on Starship {
11 name
12 }
13 }
14 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Types
Scalar types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Types
Scalar types
Enumeration types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Types
Scalar types
Enumeration types
Interfaces

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Types
Scalar types
Enumeration types
Interfaces
Union types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Types
Scalar types
Enumeration types
Interfaces
Union types
Input types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types
Int

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types
Int
Float

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types
Int
Float
String

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types
Int
Float
String
Boolean

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types
Int
Float
String
Boolean
Id

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Scalar types
Int
Float
String
Boolean
Id
You can also deﬁne your custom scalar types ex. scalar Date

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Enumeration types
1 enum Episode {
2 NEWHOPE
3 EMPIRE
4 JEDI
5 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Type modiﬁers
1 type Character {
2 name: String!
3 appearsIn: [Episode ]!
4 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Interface
1 interface Character {
2 id: ID!
3 name: String!
4 friends: [Character]
6 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Interface implementation
1 type Human implements Character {
2 id: ID!
3 name: String!
4 friends: [Character]
6 starships: [Starship]
7 totalCredits: Int
8 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Union types
1 union SearchResult = Human | Droid | Starship

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Input types

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Input types
1 input ReviewInput {
2 stars: Int!
3 commentary: String
4 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Input types
1 input ReviewInput {
2 stars: Int!
3 commentary: String
4 }
1 mutation CreateReviewForEpisode ($ep: Episode!,
→ $review: ReviewInput !) {
2 createReview(episode: $ep , review: $review)
→ {
3 stars
4 commentary
5 }
6 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices
HTTP

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)
Versioning

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)
Versioning
Nullability

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)
Versioning
Nullability
Pagination

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)
Versioning
Nullability
Pagination
Server-side Batching & Caching

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Pagination example
1 {
2 hero {
3 name
4 friends(first :2) {
5 name
6 }
7 }
8 }

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Batching - library

Introduction
Origin
History
Usage
End
Syntax
Types
Best practices
Batching - library
https://github.com/nodkz/react-relay-network-layer

Introduction
Origin
History
Usage
End
Useful tools

Introduction
Origin
History
Usage
End
Useful tools
Relay https://github.com/facebook/relay

Introduction
Origin
History
Usage
End
Useful tools
GraphiQL https://github.com/graphql/graphiql

Introduction
Origin
History
Usage
End
Useful tools
Adrenaline https://github.com/gyzerok/adrenaline

Introduction
Origin
History
Usage
End
Useful tools
Apollo client
https://github.com/apollostack/apollo-client

Introduction
Origin
History
Usage
End
Useful tools
Apollo client
https://github.com/apollostack/apollo-client
Apollo iOS
https://github.com/apollostack/apollo-ios

Introduction
Origin
History
Usage
End
Alternatives

Introduction
Origin
History
Usage
End
Alternatives
Falcor (not yet available)

Introduction
Origin
History
Usage
End
Alternatives
SPARQL

Introduction
Origin
History
Usage
End
Alternatives
SPARQL
Graph databases like Neo4j, ArangoDB

Introduction
Origin
History
Usage
End
What problems does it solve?

Introduction
Origin
History
Usage
End
client - server and microservices communication

Introduction
Origin
History
Usage
End
more precise than REST

Introduction
Origin
History
Usage
End
more precise than REST
versioning

Introduction
Origin
History
Usage
End
Sources

Introduction
Origin
History
Usage
End
Sources
The examples have been got from GraphQL oﬃcial site
http://graphql.org/learn/

Introduction
Origin
History
Usage
End
The end

Introduction
Origin
History
Usage
End
The end
Thank you

Introduction to GraphQL

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Introduction to GraphQL (20)

More from Brainhub (18)

Recently uploaded (20)

Introduction to GraphQL