1.
Diving into
GraphQL, React & Apollo
@nikolasburk

2.
Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk

3.
Agenda
1. GraphQL Introduction
2. Exploring GraphQL in a Playground
3. Building a Realtime Chat
4. Questions & Discussion

4.
GraphQL Introduction

5.
What’s GraphQL?
• new API standard by Facebook
• query language for APIs
• declarative way of fetching & updating data
@nikolasburk

6.
Mary
Mary’s posts:
Learn GraphQL Today
Why GraphQL is better than
REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL
Last three followers:
John, Alice, Sarah
Example: Blogging App

7.
Example: Blogging App with REST
/users/<id>
/users/<id>/posts
/users/<id>/followers
3 API endpoints

8.
1 Fetch user data
/users/<id>/users/<id>
/users/<id>/posts
/users/<id>/followers
{
“user”: {
“id”: “er3tg439frjw”
“name”: “Mary”,
“address”: { … },
“birthday”: “July 26, 1982”
}
}
HTTP GET
Mary
Mary’s posts:
Last three followers:

9.
2
/users/<id>
/users/<id>/posts
/users/<id>/followers
Fetch posts
HTTP GET
{
“posts”: [{
“id”: “ncwon3ce89hs”
“title”: “Learn GraphQL today”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}, {
“id”: “dsifr3as0vds”
“title”: “React & GraphQL - A declarative love story”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}, {
“id”: “die5odnvls1o”
“title”: “Why GraphQL is better than REST”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}, {
“id”: “dovmdr3nvl8f”
“title”: “Relay vs Apollo - GraphQL clients”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}]
}
Mary
Mary’s posts:
Learn GraphQL Today
Why GraphQL is better than REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL clients
Last three followers:

10.
/users/<id>
/users/<id>/posts
/users/<id>/followers
HTTP GET
{
“followers”: [{
“id”: “leo83h2dojsu”
“name”: “John”,
“address”: { … },
“birthday”: “January 6, 1970”
},{
“id”: “die5odnvls1o”
“name”: “Alice”,
“address”: { … },
“birthday”: “May 1, 1989”
}{
“id”: “xsifr3as0vds”
“name”: “Sarah”,
“address”: { … },
“birthday”: “November 20, 1986”
}
…
]
}
Mary
Mary’s posts:
Learn GraphQL Today
Why GraphQL is better than REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL clients
Last three followers:
John, Alice, Sarah
Fetch followers3

11.
1 API endpoint
Example: Blogging App with GraphQL

12.
Mary’s posts:
Last three followers:
Fetch everything with a single request1
HTTP POST
query {
User(id: “er3tg439frjw”) {
name
posts {
title
}
followers(last: 3) {
name
}
}
}

13.
Mary’s posts:
Last three followers:
Mary
Learn GraphQL Today
Why GraphQL is better than REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL clients
John, Alice, Sarah
Fetch everything with a single request1
HTTP POST
{
“data”: {
“User”: {
“name”: “Mary”,
“posts”: [
{ title: “Learn GraphQL today” },
{ title: “React & GraphQL - A declarative love story” }
{ title: “Why GraphQL is better than REST” }
{ title: “Relay vs Apollo - GraphQL Clients” }
],
“followers”: [
{ name: “John” },
{ name: “Alice” },
{ name: “Sarah” },
]
}
}
}

14.
GitHub API
https://developer.github.com/v4/explorer/

15.
Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk

16.
Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk
Operation Name

17.
Queries
… only read data
@nikolasburk
Operation Name query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

18.
Queries
… only read data
@nikolasburk
Fields query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

19.
Queries
… only read data
@nikolasburk
Root Field query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

20.
Queries
… only read data
@nikolasburk
Payload query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

21.
Queries
… only read data
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

22.
Mutations
… write and read data
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
{
“data”: {
“createMessage”: {
“id”: “3”,
}
}
}
@nikolasburk

23.
Let’s play
…with GraphQL Playgrounds
▷

24.
It’s your turn!
Create your GraphQL server
$ npm install -g graphcool
$ graphcool init --schema https://graphqlbin.com/chat.graphql
Open a GraphQL Playground
$ graphcool playground

25.
It’s your turn!
1. Create one new Person object
2. Create one Message for that Person
3. Send a query that filters for messages that
contains a certain string

26.
Query Variables
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk

27.
Query Variables
query MessageQuery($id: ID!) {
Message(id: $id) {
text
sentBy {
name
}
}
}
@nikolasburk

28.
Query Variables
@nikolasburk
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}

29.
Query Variables
@nikolasburk
mutation CreateMessageMutation($text: String!) {
createMessage(text: $text) {
id
}
}

30.
It’s your turn! again
1. Create one new Person object
2. Create one Message for that Person
3. Send a query that filters for messages that
contains a certain string
with Query Variables

31.
GraphQL Subscriptions ⚡
• event-based realtime updates
• clients subscribe to specific events
• usually implemented with websockets
@nikolasburk

32.
Realtime Updates with Subscriptions
subscription {
Message {
node {
text
}
}
}

33.
Realtime Updates with Subscriptions
{
"data": {
"Message": {
"node": {
"text": "Hello"
}
}
}
}
subscription {
Message {
node {
text
}
}
}
{
"data": {
"Message": {
"node": {
"text": "Hey"
}
}
}
}
{
"data": {
"Message": {
"node": {
"text": "Greetings"
}
}
}
}

34.
It’s your turn! one more time
1. Create a subscription to listen for Person objects being
created, updated or deleted - then in a second tab send one
of these three mutations and observe the subscription tab
2. Create a subscription to listen for Message objects being
created - then in a second tab create a new Message and
observe the subscription tab

35.
Building a Realtime Chat
💬

36.
The Stack
React
Apollo
Client Server

37.
GraphQL Clients
• provide nice API for sending queries &
subscriptions
• take caring of managing the cache
• more handy features like optimistic UI, lower-level
netw

38.
React Components
Chat

39.
React Components
ChatMessages

40.
React Components
ChatMessage

41.
React Components
ChatInput

42.
Let’s get started!
Clone starter project & install dependencies
$ git clone git@github.com:nikolasburk/fullstack-conf-starter.git
$ yarn install

43.
Resources 📚
• How to GraphQL - The Fullstack Tutorial for GraphQL
• GraphQL Weekly Newsletter
• GraphQL Radio Podcast

44.
We’re hiring!
www.graph.cool/jobs

45.
Thank you! 🙇
… any questions?