Intro to GraphQL
1 like1,957 views
The document introduces GraphQL, a query language and server-side runtime for APIs developed by Facebook in 2012 and open-sourced in 2015. It highlights common issues with REST APIs such as over-fetching and error handling, and explains how GraphQL's type system and single endpoint approach can address these problems. Additionally, the document discusses scenarios in which to adopt GraphQL and provides references for further learning.
Intro to GraphQL
- 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 Typical REST API REST API Server Client application GET ../item?itemId=XXX { item{ itemId: “XXXXX”, … }, payment{ paymentMethodId: “XXX”, }, campaign{ campaignId: “XXX” }, … }
- 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 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 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 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 An real example1 http://api.endpoint/graphql?query={ player(playerName: "Ash") { name age items { name quantity } } }
- 8. 8 An real example2 http://api.endpoint/graphql?query={ player(playerName: "Ash") { name age} }
- 9. 9 Type
- 10. 10 Alias
- 11. 11 Validation
- 12. 12 Versioning
- 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 Demo Time • Incrementally build applications • From HelloWorld to calling GraphQL API from Relay app
- 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 References • Learning GraphQL and Relay by Samer Buna • GraphQL official doc • Relay official doc • GraphQL with Sangria