React & GraphQL

@nikolasburk
GraphQL
The Why, What and How

Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk

Agenda
1. GraphQL Introduction
2. React + GraphQL = ❤
3. Demo

GraphQL Introduction
REST vs GraphQL
@nikolasburk

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

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
Example: Blogging App

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

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

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

/users/<id>
/users/<id>/posts
HTTP GET
{
“followers”: [{
“id”: “leo83h2dojsu”
“name”: “John”,
“birthday”: “January 6, 1970”
},{
“id”: “die5odnvls1o”
“name”: “Alice”,
“birthday”: “May 1, 1989”
}{
“id”: “xsifr3as0vds”
“name”: “Sarah”,
“birthday”: “November 20, 1986”
}
…
]
}
Mary
Mary’s posts:
Learn GraphQL Today
love story
John, Alice, Sarah
Fetch followers3

1 API endpoint
Example: Blogging App with GraphQL

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

Mary’s posts:
Mary
Learn GraphQL Today
love story
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” },
]
}
}
}

Core Concepts
Queries & Mutations
@nikolasburk

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

Queries
… only read data
text
sentBy {
name
}
}
}
@nikolasburk
Operation Type
3 Operation Types:
- query (default)
- mutation
- subscription

Queries
… only read data
@nikolasburk
Operation Name query MessageQuery {
text
sentBy {
name
}
}
}

Queries
… only read data
@nikolasburk
Fields query MessageQuery {
text
sentBy {
name
}
}
}

Queries
… only read data
@nikolasburk
Root Field query MessageQuery {
text
sentBy {
name
}
}
}

Queries
… only read data
@nikolasburk
Selection Set query MessageQuery {
text
sentBy {
name
}
}
}

Queries
… only read data
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk

Queries
… only read data
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk
text
sentBy {
name
}
}
}

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

@nikolasburk
• strongly typed & written in Schema Deﬁnition
Language (SDL)
• deﬁnes API capabilities ( = contract for client-server
communication)
• root types: Query, Mutation, Subscription
The GraphQL Schema

@nikolasburk
type Person {
name: String!
messages: [Message!]!
}
type Message {
text: String!
sentBy: Person
}
Types in the SDL

💡 Want to know more?
👉 GraphQL Server Basics: The Schema
Graphcool Blog: https://blog.graph.cool/ac5e2950214e

…with GraphQL Playgrounds
▷
Let’s play

React + GraphQL = ❤
React & GraphQL - A declarative love story
@nikolasburk

Declarative Programming
https://en.wikipedia.org/wiki/Declarative_programming
In computer science, declarative
programming is a programming
paradigm […] that expresses the
logic of a computation without
describing its control ﬂow.

Declarative
explain
eludicate
make clear
disclose
reveal
announce

Tell the machine what to do -
not how to do it

What are the
abstractions & primitives
you’re programming with?

Why is GraphQL declarative?
• describing data operations with dedicated
language
• core primitives: Queries & Mutations
• DSL for working with data
@nikolasburk

Declarative programs…
@nikolasburk
… are using dedicated abstractions to express goals
… lead to more expressive and concise code
… make your programs easier to reason about

GraphQL Clients
• provide convenience API for sending queries &
mutations
• take caring of managing the cache
• more handy features like optimistic UI, lower-
level networking, realtime subscriptions…
@nikolasburk

Relay vs Apollo Client
• open-sourced alongside
GraphQL in 2015
• optimized for performance
and reducing network traﬃc
• notable learning curve
• community-driven
• easy-to-understand with
intuitive abstractions
• available on several platforms

From imperative to declarative
data fetching
1. construct and send HTTP request
(e.g. with fetch)
2. receive and parse server response
3. store data locally (e.g. Redux)
4. display information in the UI
Imperative data fetching

From imperative to declarative
data fetching
1. pass data requirements to
GraphQL client
2. display information in the UI
Declarative data fetching

Demo 🔨
Simple
Instagram Clone
w/ GraphQL
https://github.com/graphcool-examples/react-graphql/tree/master/quickstart-with-apollo

Resources 📚
• How to GraphQL - The Fullstack Tutorial for GraphQL
• GraphQL Weekly Newsletter
• GraphQL Radio Podcast
• GraphQL Summit 2017 Talks (Youtube)

Community 🙌
• slack.graph.cool (> 6k members)
• GraphQL Berlin Meetup
• GraphQL Europe Conference (June 15, 2018)

Thank you! 🙇
… any questions?

GraphQL Subscriptions ⚡
• event-based realtime updates
• clients subscribe to speciﬁc events
• usually implemented with websockets
@nikolasburk

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

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

React & GraphQL

More Related Content

What's hot

What's hot (20)

Similar to React & GraphQL

Similar to React & GraphQL (20)

More from Nikolas Burk

More from Nikolas Burk (10)

Recently uploaded

Recently uploaded (20)

React & GraphQL