SlideShare a Scribd company logo

GraphQL

•
•
Deepak Shevani
Deepak Shevani

- Deepak Shevani works at Microsoft for the Azure group and recently became interested in GraphQL. - GraphQL was created by Facebook in 2015 to improve client-server communication when rebuilding their native mobile apps. It defines a query language and provides a server-side runtime to fetch the desired data. - GraphQL allows clients to get precisely the data they need through queries, reducing over- and under-fetching of data compared to REST APIs.

1 of 34
Download to read offline
Graph QL By - Deepak Shevani
Hello !! I am Deepak Shevani - Work at Microsoft for Azure group - Recently got interested in GraphQL - Contact : shevanideepak@gmail.com
Recognize this ? 3
History of Web Services 4 1960 1990 2000 2018 RPC SOAP REST GRAPHQL
REST Drawbacks ▧ Client Options : Http Verbs (GET, PUT, POST) ▧ Resources : /users /users/1 /users/1/posts ▧ No control over which fields to select ▧ Versioning of APIs is painful ▧ Overfetching / Underfetching ▧ Managing multiple endpoints is headache ▧ Change Process hindering agility 5
GraphQL origins ? ▧ In 2012, FB decided to rebuild native apps ▧ FB then used RESTful services & FQL ▧ Idea : Improving client server communication ▧ Result : In 2015, open sourced GraphQL ▧ Also provided reference implementation (js) 6
1. What is GraphQL ? Will it kill REST ? 7
1000 foot view 8 Query Data Communication Medium
1000 foot view 9 Query Data
10 graphql.org
Meet GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 11 STRONGLY TYPED GraphQL allows you to do domain first design that generates types and schema CLIENT CENTRIC GraphQL has developer centric view biased towards clients
Meet GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 12 STRONGLY TYPED GraphQL allows you to do domain first design that generates types and schema CLIENT CENTRIC GraphQL has developer centric view biased towards clients
What is GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 13 STRONGLY TYPED GraphQL allows you to do domain first design that generates types and schema CLIENT CENTRIC GraphQL has developer centric view biased towards clients
Transport Agnostic 14
Example GraphQL Query 15 { employee (id: 35) { firstName lastName email } Resource Identifier Required Fields
Example GraphQL Query 16 { employee (id: 35) { firstName lastName email } Resource Identifier Required Fields Id FirstName LastName Email DOB Salary Manager YOE 35 Deepak Shevani --- --- --- --- --- 36 Amit Sharma --- --- --- --- ---
Example GraphQL Query 17 { employee (id: 35) { firstName lastName email } Resource Identifier Required Fields Id FirstName LastName Email DOB Salary Manager YOE 35 Deepak Shevani --- --- --- --- --- 36 Amit Sharma --- --- --- --- --- GET /api/employees/35
Example GraphQL Query 18 { employee (id: 35) { firstName lastName email } { "employee" : { "firstName" : "Deepak", "lastName" : "Shevani", "email" : "abc@y.com" }
Example GraphQL Query 19 { employee (id: 35) { firstName lastName email } Nothing more, nothing less !! Resolvers tells query where to go
“ 20 REST GraphQLvs
What is GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 21 Queries Mutations Subscriptions Fragments Type System Validation Execution
GraphQL Queries 22
Queries Fetch data Describes what data you want to fetch from server. Response from server reflects what you ask in query (selection sets). We can create fragments to create reusable selection sets Query is GraphQL root type, as it maps to an operation Each field in selection set can have scalar or object type. Example fragment basicInfo on Employee { name email } query { employee (id : 35) { ... basicInfo } } More info about GraphQL can be found at http://graphql.org/learn 23
GraphQL Mutations 24
GraphQL Operations 25 query GetTweets { allTweets { text user } } mutation Post ($body : String!) { addTweet (body : $body) { id } } Query Operation Mutation Operation variables : { body : "LSPE 15th" } variables : { body : "Loving it" }
Mutations Update or Delete data Like queries, we could name them. We could also include selection sets to define return types Mutations are also root types, and they usually include variables Example mutation createSong($title:String! $one:Int) { addSong(title:$title, numberOne:$one) { id title numberOne } } More info about GraphQL can be found at http://graphql.org/learn 26
GraphQL Subscriptions 27
Subscriptions Real time updates Using web sockets, you could listen to real time updates from the server At Facebook, the use case was to fetch real time likes on a page without getting refreshed Subscriptions are also root types Example subscription { liftStatusChange { name capacity status } } More info about GraphQL can be found at http://graphql.org/learn 28
Query Language QUERY query { programs { name status } } FRAGMENTS fragment liftInfo on Lift { name status capacity night elevationGain } 29 MUTATIONS mutation { create(id: "program" status: OPEN) { name status } } SUBSCRIPTIONS subscription { liftStatusChange { name capacity status } }
Pros ? 30
Benefits No Overfetching . No Underfetching Use queries . Easy deprecation Single Endpoint No custom endpoints
Cons 32
Cons Learning Curve . Setup Required No Http Caching .
Thanks! Any questions? You can find me at: @deepak_shevani shevanideepak@gmail.com 34

More Related Content

GraphQL

  • 1. Graph QL By - Deepak Shevani
  • 2. Hello !! I am Deepak Shevani - Work at Microsoft for Azure group - Recently got interested in GraphQL - Contact : shevanideepak@gmail.com
  • 4. History of Web Services 4 1960 1990 2000 2018 RPC SOAP REST GRAPHQL
  • 5. REST Drawbacks ▧ Client Options : Http Verbs (GET, PUT, POST) ▧ Resources : /users /users/1 /users/1/posts ▧ No control over which fields to select ▧ Versioning of APIs is painful ▧ Overfetching / Underfetching ▧ Managing multiple endpoints is headache ▧ Change Process hindering agility 5
  • 6. GraphQL origins ? ▧ In 2012, FB decided to rebuild native apps ▧ FB then used RESTful services & FQL ▧ Idea : Improving client server communication ▧ Result : In 2015, open sourced GraphQL ▧ Also provided reference implementation (js) 6
  • 7. 1. What is GraphQL ? Will it kill REST ? 7
  • 8. 1000 foot view 8 Query Data Communication Medium
  • 11. Meet GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 11 STRONGLY TYPED GraphQL allows you to do domain first design that generates types and schema CLIENT CENTRIC GraphQL has developer centric view biased towards clients
  • 12. Meet GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 12 STRONGLY TYPED GraphQL allows you to do domain first design that generates types and schema CLIENT CENTRIC GraphQL has developer centric view biased towards clients
  • 13. What is GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 13 STRONGLY TYPED GraphQL allows you to do domain first design that generates types and schema CLIENT CENTRIC GraphQL has developer centric view biased towards clients
  • 15. Example GraphQL Query 15 { employee (id: 35) { firstName lastName email } Resource Identifier Required Fields
  • 16. Example GraphQL Query 16 { employee (id: 35) { firstName lastName email } Resource Identifier Required Fields Id FirstName LastName Email DOB Salary Manager YOE 35 Deepak Shevani --- --- --- --- --- 36 Amit Sharma --- --- --- --- ---
  • 17. Example GraphQL Query 17 { employee (id: 35) { firstName lastName email } Resource Identifier Required Fields Id FirstName LastName Email DOB Salary Manager YOE 35 Deepak Shevani --- --- --- --- --- 36 Amit Sharma --- --- --- --- --- GET /api/employees/35
  • 18. Example GraphQL Query 18 { employee (id: 35) { firstName lastName email } { "employee" : { "firstName" : "Deepak", "lastName" : "Shevani", "email" : "abc@y.com" }
  • 19. Example GraphQL Query 19 { employee (id: 35) { firstName lastName email } Nothing more, nothing less !! Resolvers tells query where to go
  • 21. What is GraphQL QUERY LANGUAGE GraphQL defines query language and query is validated against type system which is blueprint for API Data SERVER SIDE RUNTIME GraphQL provides server side runtime to parse and route queries to fetch desired data for the caller More info about GraphQL can be found at http://graphql.org/learn 21 Queries Mutations Subscriptions Fragments Type System Validation Execution
  • 23. Queries Fetch data Describes what data you want to fetch from server. Response from server reflects what you ask in query (selection sets). We can create fragments to create reusable selection sets Query is GraphQL root type, as it maps to an operation Each field in selection set can have scalar or object type. Example fragment basicInfo on Employee { name email } query { employee (id : 35) { ... basicInfo } } More info about GraphQL can be found at http://graphql.org/learn 23
  • 25. GraphQL Operations 25 query GetTweets { allTweets { text user } } mutation Post ($body : String!) { addTweet (body : $body) { id } } Query Operation Mutation Operation variables : { body : "LSPE 15th" } variables : { body : "Loving it" }
  • 26. Mutations Update or Delete data Like queries, we could name them. We could also include selection sets to define return types Mutations are also root types, and they usually include variables Example mutation createSong($title:String! $one:Int) { addSong(title:$title, numberOne:$one) { id title numberOne } } More info about GraphQL can be found at http://graphql.org/learn 26
  • 28. Subscriptions Real time updates Using web sockets, you could listen to real time updates from the server At Facebook, the use case was to fetch real time likes on a page without getting refreshed Subscriptions are also root types Example subscription { liftStatusChange { name capacity status } } More info about GraphQL can be found at http://graphql.org/learn 28
  • 29. Query Language QUERY query { programs { name status } } FRAGMENTS fragment liftInfo on Lift { name status capacity night elevationGain } 29 MUTATIONS mutation { create(id: "program" status: OPEN) { name status } } SUBSCRIPTIONS subscription { liftStatusChange { name capacity status } }
  • 31. Benefits No Overfetching . No Underfetching Use queries . Easy deprecation Single Endpoint No custom endpoints
  • 34. Thanks! Any questions? You can find me at: @deepak_shevani shevanideepak@gmail.com 34