As presented at DevDuck #3 - JavaScript meetup for developers (www.devduck.pl)
-----
Get know more about GraphQL
-----
Looking for a company to build you an electron desktop app? www.brainhub.eu
2. Introduction
Origin
History
Usage
Alternatives & useful tools
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
Piotr Sroczkowski GraphQL
8. Introduction
Origin
History
Usage
Alternatives & useful tools
End
DIP
Semantic triple
Dependency inversion principle (DIP)
one of SOLID principles
depend on abstraction, not concretion
IMO even abstract class breaks this rule
Piotr Sroczkowski GraphQL
9. Introduction
Origin
History
Usage
Alternatives & useful tools
End
DIP
Semantic 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
Piotr Sroczkowski GraphQL
31. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Node
express-graphql
https://github.com/graphql/express-graphql
or graphql-server
https://github.com/apollostack/graphql-server
Piotr Sroczkowski GraphQL
32. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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
Piotr Sroczkowski GraphQL
40. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Aliases
1 {
2 empireHero: hero(episode: EMPIRE) {
3 name
4 }
5 jediHero: hero(episode: JEDI) {
6 name
7 }
8 }
Piotr Sroczkowski GraphQL
41. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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
42. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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 }
Piotr Sroczkowski GraphQL
43. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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"
Piotr Sroczkowski GraphQL
44. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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 ],
Piotr Sroczkowski GraphQL
45. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Fragments - output III
32 "friends": [
33 {
34 "name": "Luke Skywalker"
35 },
36 {
37 "name": "Han Solo"
38 },
39 {
40 "name": "Leia Organa"
41 }
42 ]
43 }
44 }
45 }
Piotr Sroczkowski GraphQL
46. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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 }
Piotr Sroczkowski GraphQL
47. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Variables - output I
1 {
2 "data": {
3 "hero": {
4 "name": "R2 -D2",
5 "friends": [
6 {
7 "name": "Luke Skywalker"
8 },
9 {
10 "name": "Han Solo"
11 },
12 {
13 "name": "Leia Organa"
14 }
15 ]
Piotr Sroczkowski GraphQL
49. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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 }
Piotr Sroczkowski GraphQL
50. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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 }
Piotr Sroczkowski GraphQL
51. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
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 }
Piotr Sroczkowski GraphQL
52. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
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 }
Piotr Sroczkowski GraphQL
58. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Types
Scalar types
Enumeration types
Interfaces
Union types
Input types
Piotr Sroczkowski GraphQL
65. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Scalar types
Int
Float
String
Boolean
Id
You can also define your custom scalar types ex. scalar Date
Piotr Sroczkowski GraphQL
67. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Type modifiers
1 type Character {
2 name: String!
3 appearsIn: [Episode ]!
4 }
Piotr Sroczkowski GraphQL
68. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Interface
1 interface Character {
2 id: ID!
3 name: String!
4 friends: [Character]
5 appearsIn: [Episode ]!
6 }
Piotr Sroczkowski GraphQL
69. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Interface implementation
1 type Human implements Character {
2 id: ID!
3 name: String!
4 friends: [Character]
5 appearsIn: [Episode ]!
6 starships: [Starship]
7 totalCredits: Int
8 }
Piotr Sroczkowski GraphQL
79. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)
Versioning
Nullability
Pagination
Piotr Sroczkowski GraphQL
80. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Best practices
HTTP
JSON (with GZIP)
Versioning
Nullability
Pagination
Server-side Batching & Caching
Piotr Sroczkowski GraphQL
81. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Pagination example
1 {
2 hero {
3 name
4 friends(first :2) {
5 name
6 }
7 }
8 }
Piotr Sroczkowski GraphQL
83. Introduction
Origin
History
Usage
Alternatives & useful tools
End
How to setup a GraphQL server?
Syntax
Types
Best practices
Batching - library
https://github.com/nodkz/react-relay-network-layer
Piotr Sroczkowski GraphQL