Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to GraphQL

767 views

Published on

Overview of GraphQL
How it is different from REST
When you should consider using it and when you should not
Incremental demos until calling GraphQL from an React application: https://github.com/bary822/graphQL-techtalk

Published in: Technology
  • Be the first to comment

Intro to GraphQL

  1. 1. Intro to GraphQL Vol.01 Feb/10/2017 Hiroto Fukui EC Marketplace RMS Development Department Rakuten, Inc. http://www.rakuten.co.jp/
  2. 2. 2 Typical REST API REST API Server Client application GET ../item?itemId=XXX { item{ itemId: “XXXXX”, … }, payment{ paymentMethodId: “XXX”, }, campaign{ campaignId: “XXX” }, … }
  3. 3. 3 Common issues for REST API • Over fetching o GET…/order?responseField=shipping&responseField=payment &responseField=promotion o GET …/user → GET …/orders → GET …/item • Multiple I/Fs for multiple clients o GET ../item, GET ../mobile/item • Non-detailed error message in 4XX response o POST ../order -> { “status”: 400, “message”: “bad request.” } • Managing API design changes o Versioning o Deprecation o Documentation
  4. 4. 4 GraphQL? “GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data.” http://graphql.org/learn/
  5. 5. 5 History • Developed by facebook in 2012 for internal usage • Specification became RFC in 2015 - “This year(2015) we've begun the process of open-sourcing GraphQL by drafting a specification, releasing a reference implementation, and forming a community around it at graphql.org.” from blog post on code.facebook.com • Exploring GraphQL - Lee Byron, React Europe 2015 • Doc: http://graphql.org/ • Implementations: https://github.com/graphql
  6. 6. 6 GraphQL Approach GraphQL Client application Type1 - Field 1 - Field 2 Type2 - Field 3 - Field 4 Type1 - Field 1 - Field 2 Type2 - Field 3 - Field 4 runtime1 runtime2 runtime3 runtime4 - Parse - Type Validation My App
  7. 7. 7 An real example1 http://api.endpoint/graphql?query={ player(playerName: "Ash") { name age items { name quantity } } }
  8. 8. 8 An real example2 http://api.endpoint/graphql?query={ player(playerName: "Ash") { name age} }
  9. 9. 9 Type
  10. 10. 10 Alias
  11. 11. 11 Validation
  12. 12. 12 Versioning
  13. 13. 13 Relay • A javascript framework for React that work with GraphQL • Naturally integrate GraphQL API call into React component • Manage cache, pagination, object identification
  14. 14. 14 Demo Time • Incrementally build applications • From HelloWorld to calling GraphQL API from Relay app
  15. 15. 15 When you should do, should not do? Should • When you build brand new UI application with brand new API application. • When you tired of maintaining document up-to-date • When you answered inquiries from your clients 100 times. • When you got to build …/v3/item/… Should not • When you already got many conservative clients • When you have no time to maintain both REST and GraphQL during migration
  16. 16. 16 References • Learning GraphQL and Relay by Samer Buna • GraphQL official doc • Relay official doc • GraphQL with Sangria

×