SlideShare a Scribd company logo
Diving into
GraphQL, React & Apollo
@nikolasburk
Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk
Agenda
1. GraphQL Introduction
2. Exploring GraphQL in a Playground
3. Building a Realtime Chat
4. Questions & Discussion
GraphQL Introduction
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
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” },
]
}
}
}
GitHub API
https://developer.github.com/v4/explorer/
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 Name
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
Payload query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
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
Let’s play
…with GraphQL Playgrounds
▷
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
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
Query Variables
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk
Query Variables
query MessageQuery($id: ID!) {
Message(id: $id) {
text
sentBy {
name
}
}
}
@nikolasburk
Query Variables
@nikolasburk
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
Query Variables
@nikolasburk
mutation CreateMessageMutation($text: String!) {
createMessage(text: $text) {
id
}
}
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
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"
}
}
}
}
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
Building a Realtime Chat
💬
The Stack
React
Apollo
Client Server
GraphQL Clients
• provide nice API for sending queries &
subscriptions
• take caring of managing the cache
• more handy features like optimistic UI, lower-level
netw
React Components
Chat
React Components
ChatMessages
React Components
ChatMessage
React Components
ChatInput
Let’s get started!
Clone starter project & install dependencies
$ git clone git@github.com:nikolasburk/fullstack-conf-starter.git
$ yarn install
Resources 📚
• How to GraphQL - The Fullstack Tutorial for GraphQL
• GraphQL Weekly Newsletter
• GraphQL Radio Podcast
We’re hiring!
www.graph.cool/jobs
Thank you! 🙇
… any questions?

More Related Content

What's hot

GraphQL with Spring Boot
GraphQL with Spring BootGraphQL with Spring Boot
GraphQL with Spring Boot
Krzysztof Pawlowski
 
Austin Day of Rest - Introduction
Austin Day of Rest - IntroductionAustin Day of Rest - Introduction
Austin Day of Rest - Introduction
HandsOnWP.com
 
Building Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET CoreBuilding Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET Core
Nate Barbettini
 
Building Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET CoreBuilding Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET Core
Stormpath
 
Beautiful REST+JSON APIs with Ion
Beautiful REST+JSON APIs with IonBeautiful REST+JSON APIs with Ion
Beautiful REST+JSON APIs with Ion
Stormpath
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
Sangeeta Ashrit
 
The Lonesome LOD Cloud
The Lonesome LOD CloudThe Lonesome LOD Cloud
The Lonesome LOD Cloud
Ruben Verborgh
 
Kql and the content search web part
Kql and the content search web part Kql and the content search web part
Kql and the content search web part
InnoTech
 
Creating 3rd Generation Web APIs with Hydra
Creating 3rd Generation Web APIs with HydraCreating 3rd Generation Web APIs with Hydra
Creating 3rd Generation Web APIs with Hydra
Markus Lanthaler
 
Live DBpedia querying with high availability
Live DBpedia querying with high availabilityLive DBpedia querying with high availability
Live DBpedia querying with high availability
Ruben Verborgh
 
DBpedia's Triple Pattern Fragments
DBpedia's Triple Pattern FragmentsDBpedia's Triple Pattern Fragments
DBpedia's Triple Pattern Fragments
Ruben Verborgh
 
PK chunking presentation from Tahoe Dreamin' 2016
PK chunking presentation from Tahoe Dreamin' 2016PK chunking presentation from Tahoe Dreamin' 2016
PK chunking presentation from Tahoe Dreamin' 2016
Daniel Peter
 
Log File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkitLog File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkit
Tom Bennet
 
The Future is Federated
The Future is FederatedThe Future is Federated
The Future is Federated
Ruben Verborgh
 
Initial Usage Analysis of DBpedia's Triple Pattern Fragments
Initial Usage Analysis of DBpedia's Triple Pattern FragmentsInitial Usage Analysis of DBpedia's Triple Pattern Fragments
Initial Usage Analysis of DBpedia's Triple Pattern Fragments
Ruben Verborgh
 
Linked Data Fragments
Linked Data FragmentsLinked Data Fragments
Linked Data Fragments
Ruben Verborgh
 
Querying datasets on the Web with high availability
Querying datasets on the Web with high availabilityQuerying datasets on the Web with high availability
Querying datasets on the Web with high availability
Ruben Verborgh
 
Sustainable queryable access to Linked Data
Sustainable queryable access to Linked DataSustainable queryable access to Linked Data
Sustainable queryable access to Linked Data
Ruben Verborgh
 
Server Logs: After Excel Fails
Server Logs: After Excel FailsServer Logs: After Excel Fails
Server Logs: After Excel Fails
Oliver Mason
 
A Survey of Elasticsearch Usage
A Survey of Elasticsearch UsageA Survey of Elasticsearch Usage
A Survey of Elasticsearch Usage
Greg Brown
 

What's hot (20)

GraphQL with Spring Boot
GraphQL with Spring BootGraphQL with Spring Boot
GraphQL with Spring Boot
 
Austin Day of Rest - Introduction
Austin Day of Rest - IntroductionAustin Day of Rest - Introduction
Austin Day of Rest - Introduction
 
Building Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET CoreBuilding Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET Core
 
Building Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET CoreBuilding Beautiful REST APIs in ASP.NET Core
Building Beautiful REST APIs in ASP.NET Core
 
Beautiful REST+JSON APIs with Ion
Beautiful REST+JSON APIs with IonBeautiful REST+JSON APIs with Ion
Beautiful REST+JSON APIs with Ion
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
The Lonesome LOD Cloud
The Lonesome LOD CloudThe Lonesome LOD Cloud
The Lonesome LOD Cloud
 
Kql and the content search web part
Kql and the content search web part Kql and the content search web part
Kql and the content search web part
 
Creating 3rd Generation Web APIs with Hydra
Creating 3rd Generation Web APIs with HydraCreating 3rd Generation Web APIs with Hydra
Creating 3rd Generation Web APIs with Hydra
 
Live DBpedia querying with high availability
Live DBpedia querying with high availabilityLive DBpedia querying with high availability
Live DBpedia querying with high availability
 
DBpedia's Triple Pattern Fragments
DBpedia's Triple Pattern FragmentsDBpedia's Triple Pattern Fragments
DBpedia's Triple Pattern Fragments
 
PK chunking presentation from Tahoe Dreamin' 2016
PK chunking presentation from Tahoe Dreamin' 2016PK chunking presentation from Tahoe Dreamin' 2016
PK chunking presentation from Tahoe Dreamin' 2016
 
Log File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkitLog File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkit
 
The Future is Federated
The Future is FederatedThe Future is Federated
The Future is Federated
 
Initial Usage Analysis of DBpedia's Triple Pattern Fragments
Initial Usage Analysis of DBpedia's Triple Pattern FragmentsInitial Usage Analysis of DBpedia's Triple Pattern Fragments
Initial Usage Analysis of DBpedia's Triple Pattern Fragments
 
Linked Data Fragments
Linked Data FragmentsLinked Data Fragments
Linked Data Fragments
 
Querying datasets on the Web with high availability
Querying datasets on the Web with high availabilityQuerying datasets on the Web with high availability
Querying datasets on the Web with high availability
 
Sustainable queryable access to Linked Data
Sustainable queryable access to Linked DataSustainable queryable access to Linked Data
Sustainable queryable access to Linked Data
 
Server Logs: After Excel Fails
Server Logs: After Excel FailsServer Logs: After Excel Fails
Server Logs: After Excel Fails
 
A Survey of Elasticsearch Usage
A Survey of Elasticsearch UsageA Survey of Elasticsearch Usage
A Survey of Elasticsearch Usage
 

Similar to Diving into GraphQL, React & Apollo

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
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
Josh Price
 
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
 
[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
 
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
 
BruJUG Brussels GraphQL when RESR API is to less - lessons learned
BruJUG Brussels GraphQL when RESR API is to less - lessons learnedBruJUG Brussels GraphQL when RESR API is to less - lessons learned
BruJUG Brussels GraphQL when RESR API is to less - lessons learned
MarcinStachniuk
 
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
 
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 - 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
 
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
 
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
 
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
 
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScriptMongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
MongoDB
 
GraphQL - when REST API is not enough - lessons learned
GraphQL - when REST API is not enough - lessons learnedGraphQL - when REST API is not enough - lessons learned
GraphQL - when REST API is not enough - lessons learned
MarcinStachniuk
 
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
 
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
 
London React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparLondon React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor Charypar
React London Community
 
GraphQL - gdy API RESTowe to za mało
GraphQL - gdy API RESTowe to za małoGraphQL - gdy API RESTowe to za mało
GraphQL - gdy API RESTowe to za mało
MarcinStachniuk
 
APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...
APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...
APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...
apidays
 

Similar to Diving into GraphQL, React & Apollo (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...
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
 
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
 
[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
 
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
 
BruJUG Brussels GraphQL when RESR API is to less - lessons learned
BruJUG Brussels GraphQL when RESR API is to less - lessons learnedBruJUG Brussels GraphQL when RESR API is to less - lessons learned
BruJUG Brussels GraphQL when RESR API is to less - lessons learned
 
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
 
GraphQL in an Age of REST
GraphQL in an Age of RESTGraphQL in an Age of REST
GraphQL in an Age of REST
 
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
 
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
 
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
 
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
 
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScriptMongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
MongoDB World 2019: Building a GraphQL API with MongoDB, Prisma, & TypeScript
 
GraphQL - when REST API is not enough - lessons learned
GraphQL - when REST API is not enough - lessons learnedGraphQL - when REST API is not enough - lessons learned
GraphQL - when REST API is not enough - lessons learned
 
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
 
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
 
London React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparLondon React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor Charypar
 
GraphQL - gdy API RESTowe to za mało
GraphQL - gdy API RESTowe to za małoGraphQL - gdy API RESTowe to za mało
GraphQL - gdy API RESTowe to za mało
 
APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...
APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...
APIdays Paris 2018 - Building scalable, type-safe GraphQL servers from scratc...
 

More from 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
 
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
 
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
 
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
 
The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018
Nikolas Burk
 
State Management & Unidirectional Data Flow
State Management & Unidirectional Data FlowState Management & Unidirectional Data Flow
State Management & Unidirectional Data Flow
Nikolas Burk
 
Getting Started with Relay Modern
Getting Started with Relay ModernGetting Started with Relay Modern
Getting Started with Relay Modern
Nikolas Burk
 

More from Nikolas Burk (8)

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
 
GraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & ContentfulGraphQL Schema Stitching with Prisma & Contentful
GraphQL Schema Stitching with Prisma & Contentful
 
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
 
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
 
The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018The GraphQL Ecosystem in 2018
The GraphQL Ecosystem in 2018
 
State Management & Unidirectional Data Flow
State Management & Unidirectional Data FlowState Management & Unidirectional Data Flow
State Management & Unidirectional Data Flow
 
Getting Started with Relay Modern
Getting Started with Relay ModernGetting Started with Relay Modern
Getting Started with Relay Modern
 

Recently uploaded

Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Peter Caitens
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
kgyxske
 
Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
Michał Kurzeja
 
Going AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applicationsGoing AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applications
Alina Yurenko
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
dhavalvaghelanectarb
 
Hands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion StepsHands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion Steps
servicesNitor
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
Tier1 app
 
The Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdfThe Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdf
mohitd6
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
vaishalijagtap12
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
wonyong hwang
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
Anand Bagmar
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
KrishnaveniMohan1
 
Computer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdfComputer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdf
chandangoswami40933
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
sandeepmenon62
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
OnePlan Solutions
 

Recently uploaded (20)

Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
 
Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
 
Going AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applicationsGoing AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applications
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
 
Hands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion StepsHands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion Steps
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
 
The Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdfThe Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdf
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
 
Computer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdfComputer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdf
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
 

Diving into GraphQL, React & Apollo

  • 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
  • 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” }, ] } } }
  • 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.
  • 31. 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
  • 32. GraphQL Subscriptions ⚡ • event-based realtime updates • clients subscribe to specific events • usually implemented with websockets @nikolasburk
  • 33. Realtime Updates with Subscriptions subscription { Message { node { text } } }
  • 34. Realtime Updates with Subscriptions { "data": { "Message": { "node": { "text": "Hello" } } } } subscription { Message { node { text } } } { "data": { "Message": { "node": { "text": "Hey" } } } } { "data": { "Message": { "node": { "text": "Greetings" } } } }
  • 35. 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
  • 36. Building a Realtime Chat 💬
  • 38. GraphQL Clients • provide nice API for sending queries & subscriptions • take caring of managing the cache • more handy features like optimistic UI, lower-level netw
  • 43. Let’s get started! Clone starter project & install dependencies $ git clone git@github.com:nikolasburk/fullstack-conf-starter.git $ yarn install
  • 44. Resources 📚 • How to GraphQL - The Fullstack Tutorial for GraphQL • GraphQL Weekly Newsletter • GraphQL Radio Podcast
  • 46. Thank you! 🙇 … any questions?