SlideShare a Scribd company logo
Intro GraphQL
@simona_cotin
First time in California
Intro GraphQL
Simona Cotin
Cloud Dev Advocate @
Microsoft
@simona_cotin
Intro GraphQL
@simona_cotin
https://facebook.com/user/id
https://facebook.com/user/id/events
https://facebook.com/user/id/friends-suggestions
https://facebook.com/user/id/friends-birthdays
@simona_cotin
https://facebook.com/user/id/events
1 {
2 "name": "GraphQL",
3 "location": "Microsoft Reactor",
4 "organiser": "Devon Lindsey",
5 "size": "70",
6 "attendees": [
7 {
8 "name": "Brandon Minnik",
9 "company": "Microsoft",
10 "role": "Xamarin Chef"
11 }
12 ],
13 "..."
14 }
Intro GraphQL
@simona_cotin
⚠️ Options
Overfetch Add new endpoint
@simona_cotin
https://facebook.com/user/id/friends-suggestions
1 {
2 "firstname": "Peggy",
3 "lastname": "Rayzis",
4 "profile_pic": "some_url",
5 "..."
6 }
1 {
2 "mutual_friends": [
3 {
4 "name": "Mike Watson",
5 "company": "Apollo",
6 "role": "Apollo Chef",
7 "..."
8 }
9 ]
10 }
https://facebook.com/user/id/mutual-friends
@simona_cotin
Underfetch Add new endpoint
⚠️ Options
GraphQL
@simona_cotin
1 query {
2 user(id: "101") {
3 firstname
4 lastname
5 events {
6 count
7 }
8 friends_suggestions {
9 name
10 mutual_friends {
11 count
12 }
13 }
14 }
15 }
https://facebook.com/graphql 🦄
1 {
2 "data": {
3 "user": {
4 "firstname": "Simona",
5 "lastname": "Cotin",
6 "events": {
7 "count": "4"
8 },
9 "friends_suggestions": {
10 "name": "Zachary Deptawa",
11 "mutual_friends": {
12 "count": "12"
13 }
14 }
15 }
16 }
17 }
@simona_cotin
makes overfetching/underfetchi
🦄
Realtime documentation
Typed API
Static analysis of queries
@simona_cotin
Realtime documentation
@simona_cotin
Typed API
@simona_cotin
Static analysis of queries
@simona_cotin
https://facebook.github.io/graphql/draft/
@simona_cotin
@simona_cotin
https://github.com/chentsulin/awesome-graphql
@simona_cotin
QUERIES
@simona_cotin
1 query {
2 teams {
3 name
4 points
5 }
6 }
1 {
2 "data": {
3 "teams": [
4 {
5 "name": "red",
6 "points": 232
7 },
8 {
9 "name": "green",
10 "points": 255
11 }
12 ]
13 }
14 }
@simona_cotin
MUTATIONS
@simona_cotin
1 mutation {
2 incrementPoints(id:2) {
3 id
4 name
5 points
6 }
7 }
1 {
2 "data": {
3 "incrementPoints": {
4 "id": "2",
5 "name": "green",
6 "points": 256
7 }
8 }
9 }
@simona_cotin
@simona_cotin
Thank you!!!

More Related Content

What's hot (20)

PDF
Graphql
Niv Ben David
 
PPTX
An intro to GraphQL
valuebound
 
PPT
Introduction to the Web API
Brad Genereaux
 
PPTX
GraphQL Introduction
Serge Huber
 
PDF
GraphQL
Cédric GILLET
 
PPTX
Introduction to GraphQL
Rodrigo Prates
 
PDF
The Apollo and GraphQL Stack
Sashko Stubailo
 
PDF
How to GraphQL
Tomasz Bak
 
PPT
Spring Core
Pushan Bhattacharya
 
PPTX
Spring Boot and REST API
07.pallav
 
PPTX
Introduction to GraphQL
Bhargav Anadkat
 
PPTX
REST API
Tofazzal Ahmed
 
PPTX
REST API Design & Development
Ashok Pundit
 
PDF
GraphQL Fundamentals
Virbhadra Ankalkote
 
PDF
Better APIs with GraphQL
Josh Price
 
PDF
REST API and CRUD
Prem Sanil
 
PDF
TypeScript - An Introduction
NexThoughts Technologies
 
PDF
Api presentation
Tiago Cardoso
 
PPTX
Introduction to Spring Framework
Serhat Can
 
PPTX
Building secure applications with keycloak
Abhishek Koserwal
 
Graphql
Niv Ben David
 
An intro to GraphQL
valuebound
 
Introduction to the Web API
Brad Genereaux
 
GraphQL Introduction
Serge Huber
 
Introduction to GraphQL
Rodrigo Prates
 
The Apollo and GraphQL Stack
Sashko Stubailo
 
How to GraphQL
Tomasz Bak
 
Spring Core
Pushan Bhattacharya
 
Spring Boot and REST API
07.pallav
 
Introduction to GraphQL
Bhargav Anadkat
 
REST API
Tofazzal Ahmed
 
REST API Design & Development
Ashok Pundit
 
GraphQL Fundamentals
Virbhadra Ankalkote
 
Better APIs with GraphQL
Josh Price
 
REST API and CRUD
Prem Sanil
 
TypeScript - An Introduction
NexThoughts Technologies
 
Api presentation
Tiago Cardoso
 
Introduction to Spring Framework
Serhat Can
 
Building secure applications with keycloak
Abhishek Koserwal
 

Similar to Intro GraphQL (20)

PPTX
Build scalable APIs using GraphQL and Serverless
Simona Cotin
 
PPTX
SharePoint Saturday Chicago - Everything your need to know about the Microsof...
Sébastien Levert
 
PPTX
Fully Tested: From Design to MVP In 3 Weeks
SmartBear
 
PPTX
Developing share point solutions with the microsoft graph
Fernando Leitzelar, MBA, PMP
 
PPTX
SharePoint Conference 2018 - Build an intelligent application by connecting i...
Sébastien Levert
 
PDF
Getting started with Microsoft Graph APIs SP FEST DC 2018
Prashant G Bhoyar (Microsoft MVP)
 
PDF
Getting Started with Microsoft Graph API SPTechCon Washington DC 2017
Prashant G Bhoyar (Microsoft MVP)
 
PPTX
The Flash Facebook Cookbook - FlashMidlands
James Ford
 
PPTX
European SharePoint Conference 2018 - Build an intelligent application by con...
Sébastien Levert
 
PPTX
Microsoft Graph: Connect to essential data every app needs
Microsoft Tech Community
 
PPTX
Microsoft Graph: Connect to essential data every app needs
Microsoft Tech Community
 
PPTX
Code camp HoloLens Build and Deploy
Sarah Sexton
 
KEY
Introducing Hangout Apps
Jonathan Beri
 
PPTX
Microsoft Graph API - A Single Stop For Your Cloud Solution
Dipti Chhatrapati
 
KEY
Creating Professional Applications with the LinkedIn API
Kirsten Hunter
 
PDF
Prisma the ORM that node was waiting for
Commit University
 
PPTX
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
Sébastien Levert
 
PDF
Introduction to OpenSocial
Christian Scholz
 
PPTX
Building GraphQL APIs in C#.pptx
Brandon Minnick, MBA
 
PDF
Scaling business app development with Play and Scala
Peter Hilton
 
Build scalable APIs using GraphQL and Serverless
Simona Cotin
 
SharePoint Saturday Chicago - Everything your need to know about the Microsof...
Sébastien Levert
 
Fully Tested: From Design to MVP In 3 Weeks
SmartBear
 
Developing share point solutions with the microsoft graph
Fernando Leitzelar, MBA, PMP
 
SharePoint Conference 2018 - Build an intelligent application by connecting i...
Sébastien Levert
 
Getting started with Microsoft Graph APIs SP FEST DC 2018
Prashant G Bhoyar (Microsoft MVP)
 
Getting Started with Microsoft Graph API SPTechCon Washington DC 2017
Prashant G Bhoyar (Microsoft MVP)
 
The Flash Facebook Cookbook - FlashMidlands
James Ford
 
European SharePoint Conference 2018 - Build an intelligent application by con...
Sébastien Levert
 
Microsoft Graph: Connect to essential data every app needs
Microsoft Tech Community
 
Microsoft Graph: Connect to essential data every app needs
Microsoft Tech Community
 
Code camp HoloLens Build and Deploy
Sarah Sexton
 
Introducing Hangout Apps
Jonathan Beri
 
Microsoft Graph API - A Single Stop For Your Cloud Solution
Dipti Chhatrapati
 
Creating Professional Applications with the LinkedIn API
Kirsten Hunter
 
Prisma the ORM that node was waiting for
Commit University
 
SharePoint Fest 2019 - Build an intelligent application by connecting it to t...
Sébastien Levert
 
Introduction to OpenSocial
Christian Scholz
 
Building GraphQL APIs in C#.pptx
Brandon Minnick, MBA
 
Scaling business app development with Play and Scala
Peter Hilton
 
Ad

More from Simona Cotin (18)

PDF
Tips and tricks on how to stand out with your bio and talk abstract
Simona Cotin
 
PDF
Serverless at the end of the Universe
Simona Cotin
 
PPTX
Tech Roadmap
Simona Cotin
 
PPTX
Pwa, are we there yet?!
Simona Cotin
 
PPTX
Build Nodejs APIs using Serverless
Simona Cotin
 
PPTX
PWAs, are we there yet?!
Simona Cotin
 
PDF
Doppelganger - ng-conf
Simona Cotin
 
PDF
Build a look alike engine with machine learning and Angular
Simona Cotin
 
PDF
Hop on the serverless adventure - International Javascript London
Simona Cotin
 
PPTX
Build progressive web apps with Angular
Simona Cotin
 
PPTX
State management with ngRX
Simona Cotin
 
PDF
Deploy Angular to the Cloud (ngBucharest)
Simona Cotin
 
PDF
Build and Deploy Angular to the Cloud
Simona Cotin
 
PPTX
Serverless adventure tooling
Simona Cotin
 
PDF
Code and Deploy Angular to the Cloud
Simona Cotin
 
PDF
Deploy Angular to the Cloud
Simona Cotin
 
PDF
From Angular to React and back again
Simona Cotin
 
DOCX
Music Finder
Simona Cotin
 
Tips and tricks on how to stand out with your bio and talk abstract
Simona Cotin
 
Serverless at the end of the Universe
Simona Cotin
 
Tech Roadmap
Simona Cotin
 
Pwa, are we there yet?!
Simona Cotin
 
Build Nodejs APIs using Serverless
Simona Cotin
 
PWAs, are we there yet?!
Simona Cotin
 
Doppelganger - ng-conf
Simona Cotin
 
Build a look alike engine with machine learning and Angular
Simona Cotin
 
Hop on the serverless adventure - International Javascript London
Simona Cotin
 
Build progressive web apps with Angular
Simona Cotin
 
State management with ngRX
Simona Cotin
 
Deploy Angular to the Cloud (ngBucharest)
Simona Cotin
 
Build and Deploy Angular to the Cloud
Simona Cotin
 
Serverless adventure tooling
Simona Cotin
 
Code and Deploy Angular to the Cloud
Simona Cotin
 
Deploy Angular to the Cloud
Simona Cotin
 
From Angular to React and back again
Simona Cotin
 
Music Finder
Simona Cotin
 
Ad

Recently uploaded (20)

PDF
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
PDF
SAP Firmaya İade ABAB Kodları - ABAB ile yazılmıl hazır kod örneği
Salih Küçük
 
PPTX
Foundations of Marketo Engage - Powering Campaigns with Marketo Personalization
bbedford2
 
PDF
HiHelloHR – Simplify HR Operations for Modern Workplaces
HiHelloHR
 
PPTX
Home Care Tools: Benefits, features and more
Third Rock Techkno
 
PPTX
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
PPTX
Change Common Properties in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PPTX
Finding Your License Details in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PPTX
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
PDF
Download Canva Pro 2025 PC Crack Full Latest Version
bashirkhan333g
 
PDF
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
PDF
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
PDF
TheFutureIsDynamic-BoxLang witch Luis Majano.pdf
Ortus Solutions, Corp
 
PDF
The 5 Reasons for IT Maintenance - Arna Softech
Arna Softech
 
PDF
Open Chain Q2 Steering Committee Meeting - 2025-06-25
Shane Coughlan
 
PPTX
Homogeneity of Variance Test Options IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PPTX
OpenChain @ OSS NA - In From the Cold: Open Source as Part of Mainstream Soft...
Shane Coughlan
 
PPTX
Tally software_Introduction_Presentation
AditiBansal54083
 
PPTX
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
PDF
AI + DevOps = Smart Automation with devseccops.ai.pdf
Devseccops.ai
 
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
SAP Firmaya İade ABAB Kodları - ABAB ile yazılmıl hazır kod örneği
Salih Küçük
 
Foundations of Marketo Engage - Powering Campaigns with Marketo Personalization
bbedford2
 
HiHelloHR – Simplify HR Operations for Modern Workplaces
HiHelloHR
 
Home Care Tools: Benefits, features and more
Third Rock Techkno
 
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Change Common Properties in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Finding Your License Details in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
Download Canva Pro 2025 PC Crack Full Latest Version
bashirkhan333g
 
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
TheFutureIsDynamic-BoxLang witch Luis Majano.pdf
Ortus Solutions, Corp
 
The 5 Reasons for IT Maintenance - Arna Softech
Arna Softech
 
Open Chain Q2 Steering Committee Meeting - 2025-06-25
Shane Coughlan
 
Homogeneity of Variance Test Options IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
OpenChain @ OSS NA - In From the Cold: Open Source as Part of Mainstream Soft...
Shane Coughlan
 
Tally software_Introduction_Presentation
AditiBansal54083
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
AI + DevOps = Smart Automation with devseccops.ai.pdf
Devseccops.ai
 

Intro GraphQL

Editor's Notes

  • #10: Over-fetching is fetching too much data, aka there is data in the reponse you don't use. This leads to heavier responses, You end up using more bandwidth than you should and poor UX specially on mobile. We are consuming precious data.
  • #12: Under-fetching is not having enough data with a call to an endpoint, leading you to call a second endpoint. This leads to more server roundtrips, network latency, more json parsing on the client
  • #14: The response looks very similar to the request. And that’s because we tell graphql what we want to retrieve!
  • #15: https://stackoverflow.com/questions/44564905/what-is-over-fetching-or-under-fetching/44568365#44568365 In both cases, they are performances issues : you either use more bandwidth than you should, or you are making more HTTP requests that you should. In a perfect world, theses problems would never arise ; you would have exactly the right endpoints to give exactly the right data to your products. Theses problems often appear when you scale and iterate on your products. The data you use on your pages often change, and the cost to maintain a separate endpoint with exactly the right data for each component becomes too much. So you end up with a compromise between not having too much endpoints and having the endpoints fit the need best. This will lead to over-fetching in some cases (the endpoint will provide more data that you need for your specific component), and under-fetching in others (you will need to call a second endpoint). So GraphQL fixes this problem because it allows access to an arbitrary set of data exposed by the server. You specifically specify what you need and will get this data, and only this data, in one trip to the server.
  • #17: https://developer.github.com/v4/explorer/
  • #21: https://www.apollographql.com/ https://facebook.github.io/relay/
  • #23: GET request
  • #25: POST PUT method
  • #26: Add mutation queries
  • #27: https://github.com/simonaco/voting-app