SlideShare a Scribd company logo
@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
A rapidly growing Community
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
/users/<id>/followers
{
“user”: {
“id”: “er3tg439frjw”
“name”: “Mary”,
“address”: { … },
“birthday”: “July 26, 1982”
}
}
HTTP GET
Mary
Mary’s posts:
Last three followers:
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:
/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
1 API endpoint
Example: Blogging App with GraphQL
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
}
}
}
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” },
]
}
}
}
Core Concepts
Queries & Mutations
@nikolasburk
Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk
Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk
Operation Type
3 Operation Types:
- query (default)
- mutation
- subscription
Queries
… only read data
@nikolasburk
Operation Name query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
Queries
… only read data
@nikolasburk
Fields query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
Queries
… only read data
@nikolasburk
Root Field query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
Queries
… only read data
@nikolasburk
Selection Set query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk
Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk
Queries
… only read data
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
Mutations
… write and read data
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
{
“data”: {
“createMessage”: {
“id”: “3”,
}
}
}
@nikolasburk
Mutations
… write and read data
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
{
“data”: {
“createMessage”: {
“id”: “3”,
}
}
}
@nikolasburk
Mutations
… write and read data
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
{
“data”: {
“createMessage”: {
“id”: “3”,
}
}
}
@nikolasburk
@nikolasburk
• strongly typed & written in Schema Definition
Language (SDL)
• defines 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 flow.
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 flow.
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 traffic
• 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 specific 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"
}
}
}
}

More Related Content

What's hot

GraphQL Advanced
GraphQL AdvancedGraphQL Advanced
GraphQL Advanced
LeanIX GmbH
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQL
Amazon Web Services
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)
Rafael Wilber Kerr
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
Sangeeta Ashrit
 
GraphQL
GraphQLGraphQL
GraphQL
Joel Corrêa
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
Bhargav Anadkat
 
An intro to GraphQL
An intro to GraphQLAn intro to GraphQL
An intro to GraphQL
valuebound
 
GraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer toolsGraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer tools
Sashko Stubailo
 
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
luisw19
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQL
Squareboat
 
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Hafiz Ismail
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
Serge Huber
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL Stack
Sashko Stubailo
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
Josh Price
 
GraphQL Fundamentals
GraphQL FundamentalsGraphQL Fundamentals
GraphQL Fundamentals
Virbhadra Ankalkote
 
Spring GraphQL
Spring GraphQLSpring GraphQL
Spring GraphQL
VMware Tanzu
 
GraphQL vs REST
GraphQL vs RESTGraphQL vs REST
GraphQL vs REST
GreeceJS
 
Attacking GraphQL
Attacking GraphQLAttacking GraphQL
Attacking GraphQL
KavishaSheth1
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
Dmitry Sheiko
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
Rodrigo Prates
 

What's hot (20)

GraphQL Advanced
GraphQL AdvancedGraphQL Advanced
GraphQL Advanced
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQL
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
GraphQL
GraphQLGraphQL
GraphQL
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
An intro to GraphQL
An intro to GraphQLAn intro to GraphQL
An intro to GraphQL
 
GraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer toolsGraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer tools
 
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQL
 
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL Stack
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
 
GraphQL Fundamentals
GraphQL FundamentalsGraphQL Fundamentals
GraphQL Fundamentals
 
Spring GraphQL
Spring GraphQLSpring GraphQL
Spring GraphQL
 
GraphQL vs REST
GraphQL vs RESTGraphQL vs REST
GraphQL vs REST
 
Attacking GraphQL
Attacking GraphQLAttacking GraphQL
Attacking GraphQL
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 

Similar to React & GraphQL

Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...
Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...
Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...
AWS Germany
 
Building Serverless GraphQL Backends
Building Serverless GraphQL BackendsBuilding Serverless GraphQL Backends
Building Serverless GraphQL Backends
Nikolas Burk
 
Diving into GraphQL, React & Apollo
Diving into GraphQL, React & ApolloDiving into GraphQL, React & Apollo
Diving into GraphQL, React & Apollo
Nikolas Burk
 
The Serverless GraphQL Backend Architecture
The Serverless GraphQL Backend ArchitectureThe Serverless GraphQL Backend Architecture
The Serverless GraphQL Backend Architecture
Nikolas Burk
 
GraphQL Subscriptions
GraphQL SubscriptionsGraphQL Subscriptions
GraphQL Subscriptions
Nikolas Burk
 
GraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & ContentfulGraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & Contentful
Nikolas Burk
 
GraphQL and its schema as a universal layer for database access
GraphQL and its schema as a universal layer for database accessGraphQL and its schema as a universal layer for database access
GraphQL and its schema as a universal layer for database access
Connected Data World
 
The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018
Nikolas Burk
 
GraphQL in an Age of REST
GraphQL in an Age of RESTGraphQL in an Age of REST
GraphQL in an Age of REST
Yos Riady
 
GraphQL with .NET Core Microservices.pdf
GraphQL with .NET Core Microservices.pdfGraphQL with .NET Core Microservices.pdf
GraphQL with .NET Core Microservices.pdf
Knoldus Inc.
 
GraphQL - when REST API is to less - lessons learned
GraphQL - when REST API is to less - lessons learnedGraphQL - when REST API is to less - lessons learned
GraphQL - when REST API is to less - lessons learned
MarcinStachniuk
 
Overview of GraphQL & Clients
Overview of GraphQL & ClientsOverview of GraphQL & Clients
Overview of GraphQL & Clients
Pokai Chang
 
MongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and Typescript
MongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and TypescriptMongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and Typescript
MongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and Typescript
MongoDB
 
Introduction to Graph QL
Introduction to Graph QLIntroduction to Graph QL
Introduction to Graph QL
Deepak More
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
Andrew Rota
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
Valentin Buryakov
 
Building GraphQL Servers with Node.JS & Prisma
Building GraphQL Servers with Node.JS & PrismaBuilding GraphQL Servers with Node.JS & Prisma
Building GraphQL Servers with Node.JS & Prisma
Nikolas Burk
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
İlker Güller
 
HyperGraphQL
HyperGraphQLHyperGraphQL
HyperGraphQL
Szymon Klarman
 
[DevCrowd] GraphQL - gdy API RESTowe to za mało
[DevCrowd] GraphQL - gdy API RESTowe to za mało[DevCrowd] GraphQL - gdy API RESTowe to za mało
[DevCrowd] GraphQL - gdy API RESTowe to za mało
MarcinStachniuk
 

Similar to React & GraphQL (20)

Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...
Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...
Building and deploying GraphQL Servers with AWS Lambda and Prisma I AWS Dev D...
 
Building Serverless GraphQL Backends
Building Serverless GraphQL BackendsBuilding Serverless GraphQL Backends
Building Serverless GraphQL Backends
 
Diving into GraphQL, React & Apollo
Diving into GraphQL, React & ApolloDiving into GraphQL, React & Apollo
Diving into GraphQL, React & Apollo
 
The Serverless GraphQL Backend Architecture
The Serverless GraphQL Backend ArchitectureThe Serverless GraphQL Backend Architecture
The Serverless GraphQL Backend Architecture
 
GraphQL Subscriptions
GraphQL SubscriptionsGraphQL Subscriptions
GraphQL Subscriptions
 
GraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & ContentfulGraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & Contentful
 
GraphQL and its schema as a universal layer for database access
GraphQL and its schema as a universal layer for database accessGraphQL and its schema as a universal layer for database access
GraphQL and its schema as a universal layer for database access
 
The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018
 
GraphQL in an Age of REST
GraphQL in an Age of RESTGraphQL in an Age of REST
GraphQL in an Age of REST
 
GraphQL with .NET Core Microservices.pdf
GraphQL with .NET Core Microservices.pdfGraphQL with .NET Core Microservices.pdf
GraphQL with .NET Core Microservices.pdf
 
GraphQL - when REST API is to less - lessons learned
GraphQL - when REST API is to less - lessons learnedGraphQL - when REST API is to less - lessons learned
GraphQL - when REST API is to less - lessons learned
 
Overview of GraphQL & Clients
Overview of GraphQL & ClientsOverview of GraphQL & Clients
Overview of GraphQL & Clients
 
MongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and Typescript
MongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and TypescriptMongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and Typescript
MongoDB.local Berlin: Building a GraphQL API with MongoDB, Prisma and Typescript
 
Introduction to Graph QL
Introduction to Graph QLIntroduction to Graph QL
Introduction to Graph QL
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
 
Building GraphQL Servers with Node.JS & Prisma
Building GraphQL Servers with Node.JS & PrismaBuilding GraphQL Servers with Node.JS & Prisma
Building GraphQL Servers with Node.JS & Prisma
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
HyperGraphQL
HyperGraphQLHyperGraphQL
HyperGraphQL
 
[DevCrowd] GraphQL - gdy API RESTowe to za mało
[DevCrowd] GraphQL - gdy API RESTowe to za mało[DevCrowd] GraphQL - gdy API RESTowe to za mało
[DevCrowd] GraphQL - gdy API RESTowe to za mało
 

More from Nikolas Burk

Next-generation API Development with GraphQL and Prisma
Next-generation API Development with GraphQL and PrismaNext-generation API Development with GraphQL and Prisma
Next-generation API Development with GraphQL and Prisma
Nikolas Burk
 
Code-first GraphQL Server Development with Prisma
Code-first  GraphQL Server Development with PrismaCode-first  GraphQL Server Development with Prisma
Code-first GraphQL Server Development with Prisma
Nikolas Burk
 
GraphQL & Prisma from Scratch
GraphQL & Prisma from ScratchGraphQL & Prisma from Scratch
GraphQL & Prisma from Scratch
Nikolas Burk
 
Managing GraphQL servers with AWS Fargate & Prisma Cloud
Managing GraphQL servers  with AWS Fargate & Prisma CloudManaging GraphQL servers  with AWS Fargate & Prisma Cloud
Managing GraphQL servers with AWS Fargate & Prisma Cloud
Nikolas Burk
 
State Management & Unidirectional Data Flow
State Management & Unidirectional Data FlowState Management & Unidirectional Data Flow
State Management & Unidirectional Data Flow
Nikolas Burk
 
Authentication, Authorization & Error Handling with GraphQL
Authentication, Authorization & Error Handling with GraphQLAuthentication, Authorization & Error Handling with GraphQL
Authentication, Authorization & Error Handling with GraphQL
Nikolas Burk
 
Getting Started with Relay Modern
Getting Started with Relay ModernGetting Started with Relay Modern
Getting Started with Relay Modern
Nikolas Burk
 
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Nikolas Burk
 
Building a Realtime Chat with React & GraphQL Subscriptions
Building a Realtime Chat with React & GraphQL Subscriptions Building a Realtime Chat with React & GraphQL Subscriptions
Building a Realtime Chat with React & GraphQL Subscriptions
Nikolas Burk
 
REST in Peace - Using GraphQL with Apollo on iOS
REST in Peace - Using GraphQL with Apollo on iOSREST in Peace - Using GraphQL with Apollo on iOS
REST in Peace - Using GraphQL with Apollo on iOS
Nikolas Burk
 

More from Nikolas Burk (10)

Next-generation API Development with GraphQL and Prisma
Next-generation API Development with GraphQL and PrismaNext-generation API Development with GraphQL and Prisma
Next-generation API Development with GraphQL and Prisma
 
Code-first GraphQL Server Development with Prisma
Code-first  GraphQL Server Development with PrismaCode-first  GraphQL Server Development with Prisma
Code-first GraphQL Server Development with Prisma
 
GraphQL & Prisma from Scratch
GraphQL & Prisma from ScratchGraphQL & Prisma from Scratch
GraphQL & Prisma from Scratch
 
Managing GraphQL servers with AWS Fargate & Prisma Cloud
Managing GraphQL servers  with AWS Fargate & Prisma CloudManaging GraphQL servers  with AWS Fargate & Prisma Cloud
Managing GraphQL servers with AWS Fargate & Prisma Cloud
 
State Management & Unidirectional Data Flow
State Management & Unidirectional Data FlowState Management & Unidirectional Data Flow
State Management & Unidirectional Data Flow
 
Authentication, Authorization & Error Handling with GraphQL
Authentication, Authorization & Error Handling with GraphQLAuthentication, Authorization & Error Handling with GraphQL
Authentication, Authorization & Error Handling with GraphQL
 
Getting Started with Relay Modern
Getting Started with Relay ModernGetting Started with Relay Modern
Getting Started with Relay Modern
 
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions
 
Building a Realtime Chat with React & GraphQL Subscriptions
Building a Realtime Chat with React & GraphQL Subscriptions Building a Realtime Chat with React & GraphQL Subscriptions
Building a Realtime Chat with React & GraphQL Subscriptions
 
REST in Peace - Using GraphQL with Apollo on iOS
REST in Peace - Using GraphQL with Apollo on iOSREST in Peace - Using GraphQL with Apollo on iOS
REST in Peace - Using GraphQL with Apollo on iOS
 

Recently uploaded

Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
TaghreedAltamimi
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
Ayan Halder
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
Patrick Weigel
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
Aftab Hussain
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
Hornet Dynamics
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Crescat
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
Peter Muessig
 
openEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain SecurityopenEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain Security
Shane Coughlan
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
rodomar2
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
Octavian Nadolu
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
Aftab Hussain
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 

Recently uploaded (20)

Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
 
openEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain SecurityopenEuler Case Study - The Journey to Supply Chain Security
openEuler Case Study - The Journey to Supply Chain Security
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 

React & GraphQL

  • 2. Nikolas Burk 👋 Developer at Graphcool $ whoami @nikolasburk
  • 3. Agenda 1. GraphQL Introduction 2. React + GraphQL = ❤ 3. Demo
  • 4. GraphQL Introduction REST vs GraphQL @nikolasburk
  • 5. What’s GraphQL? • new API standard by Facebook • query language for APIs • declarative way of fetching & updating data @nikolasburk
  • 6. A rapidly growing Community
  • 7. 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
  • 8. Example: Blogging App with REST /users/<id> /users/<id>/posts /users/<id>/followers 3 API endpoints
  • 9. 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:
  • 10. 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:
  • 11. /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
  • 12. 1 API endpoint Example: Blogging App with GraphQL
  • 13. 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 } } }
  • 14. 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” }, ] } } }
  • 15. Core Concepts Queries & Mutations @nikolasburk
  • 16. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } @nikolasburk
  • 17. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } @nikolasburk Operation Type 3 Operation Types: - query (default) - mutation - subscription
  • 18. Queries … only read data @nikolasburk Operation Name query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  • 19. Queries … only read data @nikolasburk Fields query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  • 20. Queries … only read data @nikolasburk Root Field query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  • 21. Queries … only read data @nikolasburk Selection Set query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  • 22. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  • 23. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  • 24. Queries … only read data { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  • 25. Mutations … write and read data mutation CreateMessageMutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  • 26. Mutations … write and read data mutation CreateMessageMutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  • 27. Mutations … write and read data mutation CreateMessageMutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  • 28. @nikolasburk • strongly typed & written in Schema Definition Language (SDL) • defines API capabilities ( = contract for client-server communication) • root types: Query, Mutation, Subscription The GraphQL Schema
  • 29. @nikolasburk type Person { name: String! messages: [Message!]! } type Message { text: String! sentBy: Person } Types in the SDL
  • 30. 💡 Want to know more? 👉 GraphQL Server Basics: The Schema Graphcool Blog: https://blog.graph.cool/ac5e2950214e
  • 32. React + GraphQL = ❤ React & GraphQL - A declarative love story @nikolasburk
  • 33. 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 flow.
  • 34. 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 flow.
  • 36. Tell the machine what to do - not how to do it
  • 37. What are the abstractions & primitives you’re programming with?
  • 38.
  • 39. Why is GraphQL declarative? • describing data operations with dedicated language • core primitives: Queries & Mutations • DSL for working with data @nikolasburk
  • 40. Declarative programs… @nikolasburk … are using dedicated abstractions to express goals … lead to more expressive and concise code … make your programs easier to reason about
  • 41. 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
  • 42. Relay vs Apollo Client • open-sourced alongside GraphQL in 2015 • optimized for performance and reducing network traffic • notable learning curve • community-driven • easy-to-understand with intuitive abstractions • available on several platforms
  • 43. 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
  • 44. From imperative to declarative data fetching 1. pass data requirements to GraphQL client 2. display information in the UI Declarative data fetching
  • 45. Demo 🔨 Simple Instagram Clone w/ GraphQL https://github.com/graphcool-examples/react-graphql/tree/master/quickstart-with-apollo
  • 46. Resources 📚 • How to GraphQL - The Fullstack Tutorial for GraphQL • GraphQL Weekly Newsletter • GraphQL Radio Podcast • GraphQL Summit 2017 Talks (Youtube)
  • 47. Community 🙌 • slack.graph.cool (> 6k members) • GraphQL Berlin Meetup • GraphQL Europe Conference (June 15, 2018)
  • 48. Thank you! 🙇 … any questions?
  • 49. GraphQL Subscriptions ⚡ • event-based realtime updates • clients subscribe to specific events • usually implemented with websockets @nikolasburk
  • 50. Realtime Updates with Subscriptions subscription { Message { node { text } } }
  • 51. Realtime Updates with Subscriptions { "data": { "Message": { "node": { "text": "Hello" } } } } subscription { Message { node { text } } } { "data": { "Message": { "node": { "text": "Hey" } } } } { "data": { "Message": { "node": { "text": "Greetings" } } } }