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

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