Introduction to GraphQL

IntroductionOriginHistoryUsage

Alternatives & useful toolsEnd

GraphQL

Piotr Sroczkowski

Brainhub

January 23, 2017

Piotr Sroczkowski GraphQL



Summary I

1 Introduction

2 OriginDIPSemantic triple

3 History

4 UsageHow to setup a GraphQL server?SyntaxTypesBest practices

5 Alternatives & useful tools

6 End




What is GraphQL?

Graph query language




What is GraphQL?

Graph query language




DIPSemantic triple

Dependency inversion principle (DIP)

one of SOLID principles

depend on abstraction, not concretion

IMO even abstract class breaks this rule

so we should depend only on interfaces




DIPSemantic triple









DIPSemantic triple









DIPSemantic triple









DIPSemantic triple









DIPSemantic triple

DIP in services

DIP is not only in OOP

also in SOA

it’s like joining blocks together




DIPSemantic triple

DIP in services


also in SOA





DIPSemantic triple

DIP in services


also in SOA





DIPSemantic triple

DIP in services


also in SOA





DIPSemantic triple

DIP in microservices

it’s not a new paradigm, it’s just an example of SOA

service discovery




DIPSemantic triple



service discovery




DIPSemantic triple



service discovery




DIPSemantic triple

Semantic triple

an RDF (Resouce Description Framework) data model

ex. Alice likes Bob




DIPSemantic triple

Semantic triple


ex. Alice likes Bob




DIPSemantic triple

Semantic triple


ex. Alice likes Bob




DIPSemantic triple

Triplestore

a proposed database for storage of triples




DIPSemantic triple

Triplestore

a proposed database for storage of triples




DIPSemantic triple

Think in graphs

Why?

UI

Graph algorithms




DIPSemantic triple

Think in graphs

Why?

UI

Graph algorithms




DIPSemantic triple

Think in graphs

Why?

UI

Graph algorithms




DIPSemantic triple

Think in graphs

Why?

UI

Graph algorithms




GraphQL history

developed internally in Facebook in 2012

publicly released in 2015




GraphQL history






GraphQL history






How to setup a GraphQL server?SyntaxTypesBest practices

Node

express-graphqlhttps://github.com/graphql/express-graphql

or graphql-serverhttps://github.com/apollostack/graphql-server


https://github.com/graphql/express-graphql

https://github.com/apollostack/graphql-server




Node









Node









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





Queries

1 {

2 hero {

3 name

4 }

5 }

1 {

2 "data": {

3 "hero": {

4 "name": "R2 -D2"

5 }

6 }

7 }





Queries

1 {

2 hero {

3 name

4 }

5 }

1 {

2 "data": {

3 "hero": {

4 "name": "R2 -D2"

5 }

6 }

7 }





Queries

1 {

2 hero {

3 name

4 }

5 }

1 {

2 "data": {

3 "hero": {

4 "name": "R2 -D2"

5 }

6 }

7 }





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 }





Queries

1 {

2 human(id: "1000") {

3 name

4 height

5 }

6 }

1 {

2 "data": {

3 "human": {


5 "height": 1.72

6 }

7 }

8 }





Queries

1 {

2 human(id: "1000") {

3 name

4 height

5 }

6 }

1 {

2 "data": {

3 "human": {


5 "height": 1.72

6 }

7 }

8 }





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 }

10 }





Aliases

1 {


3 name

4 }


6 name

7 }

8 }

1 {

2 "data": {

3 "empireHero": {


5 },

6 "jediHero": {

7 "name": "R2 -D2"

8 }

9 }

10 }





Aliases

1 {


3 name

4 }


6 name

7 }

8 }

1 {

2 "data": {

3 "empireHero": {


5 },

6 "jediHero": {

7 "name": "R2 -D2"

8 }

9 }

10 }





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 }





Fragments - output I

1 {

2 "data": {

3 "leftComparison": {


5 "appearsIn": [

6 "NEWHOPE",

7 "EMPIRE",

8 "JEDI"

9 ],

10 "friends": [

11 {

12 "name": "Han Solo"

13 },

14 {

15 "name": "Leia Organa"





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 ],





Fragments - output III

32 "friends": [

33 {


35 },

36 {


38 },

39 {


41 }

42 ]

43 }

44 }

45 }





Variables - input I

1 query HeroNameAndFriends($episode: Episode) {

2 hero(episode: $episode) {

3 name

4 friends {

5 name

6 }

7 }

8 }





Variables - output I

1 {

2 "data": {

3 "hero": {

4 "name": "R2 -D2",

5 "friends": [

6 {


8 },

9 {


11 },

12 {


14 }

15 ]





Variables - output II

16 }

17 }

18 }





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 }





Mutations I

1 mutation CreateReviewForEpisode($ep: Episode!, $review

↪→ : ReviewInput !) {

2 createReview(episode: $ep , review: $review) {

3 stars

4 commentary

5 }

6 }





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 }





Meta fields 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 }





Types

Scalar types

Enumeration types

Interfaces

Union types

Input types





Types

Scalar types

Enumeration types

Interfaces

Union types

Input types





Types

Scalar types

Enumeration types

Interfaces

Union types

Input types





Types

Scalar types

Enumeration types

Interfaces

Union types

Input types





Types

Scalar types

Enumeration types

Interfaces

Union types

Input types





Types

Scalar types

Enumeration types

Interfaces

Union types

Input types





Scalar types

Int

Float

String

Boolean

Id

You can also define your custom scalar types ex. scalar Date





Scalar types

Int

Float

String

Boolean

Id






Scalar types

Int

Float

String

Boolean

Id






Scalar types

Int

Float

String

Boolean

Id






Scalar types

Int

Float

String

Boolean

Id






Scalar types

Int

Float

String

Boolean

Id






Scalar types

Int

Float

String

Boolean

Id






Enumeration types

1 enum Episode {

2 NEWHOPE

3 EMPIRE

4 JEDI

5 }





Type modifiers

1 type Character {

2 name: String!

3 appearsIn: [Episode ]!

4 }





Interface

1 interface Character {

2 id: ID!

3 name: String!

4 friends: [Character]


6 }





Interface implementation

1 type Human implements Character {

2 id: ID!

3 name: String!

4 friends: [Character]


6 starships: [Starship]

7 totalCredits: Int

8 }





Union types

1 union SearchResult = Human | Droid | Starship





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 }





Input types


2 stars: Int!


4 }




↪→ {

3 stars

4 commentary

5 }

6 }





Input types


2 stars: Int!


4 }




↪→ {

3 stars

4 commentary

5 }

6 }





Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination

Server-side Batching & Caching





Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination






Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination






Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination






Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination






Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination






Best practices

HTTP

JSON (with GZIP)

Versioning

Nullability

Pagination






Pagination example

1 {

2 hero {

3 name

4 friends(first :2) {

5 name

6 }

7 }

8 }





Batching - library

https://github.com/nodkz/react-relay-network-layer





Batching - library

https://github.com/nodkz/react-relay-network-layer




Useful tools

Relay https://github.com/facebook/relay

GraphiQL https://github.com/graphql/graphiql

Adrenaline https://github.com/gyzerok/adrenaline

Apollo clienthttps://github.com/apollostack/apollo-client

Apollo iOShttps://github.com/apollostack/apollo-ios


https://github.com/facebook/relay

https://github.com/graphql/graphiql

https://github.com/gyzerok/adrenaline

https://github.com/apollostack/apollo-client

https://github.com/apollostack/apollo-ios



Useful tools














Useful tools














Useful tools














Useful tools














Useful tools














Alternatives

Falcor (not yet available)

SPARQL

Graph databases like Neo4j, ArangoDB




Alternatives


SPARQL





Alternatives


SPARQL





Alternatives


SPARQL





What problems does it solve?

client - server and microservices communication

more precise than REST

versioning







versioning







versioning







versioning




Sources

The examples have been got from GraphQL official sitehttp://graphql.org/learn/


http://graphql.org/learn/



Sources

The examples have been got from GraphQL official sitehttp://graphql.org/learn/


http://graphql.org/learn/



The end

Thank you




The end

Thank you


Introduction to GraphQL

Software