現在ではWeb API = REST API と言ってもいいぐらい普及しているREST APIですが、GraphQLはこれに変わるものになるのでしょうか？ 今回は２つを比較しながらGraphQLのメリット、デメッリットを考えつつお話します。

1. REST
GraphQL
The Final
2017-04-22 @atsu666

2. @atsu666
• PHPer 5
• CMS a-blog cms
•

3. REST API

4. {
"people": {
"id": 1,
"name": "atsu666",
"friends": [
"/people/2/",
“/people/3/",
"/people/4/"
]
}
}
GET /people/1/ GET /people/2/
GET /people/3/
GET /people/4/
.
.
.

5. • N+1
•
•
• …
•

6. {
"person": {
"id": 1,
"name": “atsu666",
"entries": [
{...}
],
"friends": [
{
"name": " "
},
{
"name": " "
}
]
}
}
• …
•
• REST
•

7. GET /entries?embed=comments
GET /entries?embed=comments&commentCount=5
5 PC 10
GET /entries?embed=comments,liks&comment_count=5

8. •
•
•

9. • 1
•
•
•

10. GraphQL

11. What’s GraphQL?
“ GraphQL API
”
http://graphql.org/

12. What’s GraphQL?
• Facebook 2012
• RFC Working Draft 2015
• API
• POST
•

13. Server Libraries

14. GraphQL Clients
Relay
• React
Apollo
• React
• Angular
• Plain JavaScript
• iOS

15. {
login {
name
friends {
name
}
}
}
{
"data": {
"login": {
"name": "atsu666",
"friends": [
{
"name": "user1"
},
{
"name": "user2"
}
]
}
}
}

16. •
•
•

17. Arguments
{
people(id: 2) {
name
friends(first: 3) {
name
}
}
}
• REST
•

18. Variables
•
• REST URl
query getPeople($uid: Int!){
people(id: $uid) {
name
friends(first: 3) {
name
}
}
}
Query Variables
{
"uid": 2
}

19. Aliases, Fragments
{
login {
original: userPhoto(size: ORIGINAL) {
...imageField
}
icon: userPhoto(size: ICON) {
...imageField
}
}
}
fragment imageField on Image {
url
width
height
}

20. Aliases, Fragments
•
• REST
• Fragments

21. Schema,Type System
type People {
id: Int!
name: String!
userImage: Image
friends: [People!]
}
type Entry {
…
author: People!
}
type Query {
login: People!
entries: [Entry]!
}
• Object type
• Scalar types
• Enumeration types
• Lists
• Non-Null
• Interfaces
• Union types
GraphQL schema language

22. Schema,Type System
•
• ( / ) Schema

23. Introspection
{
__type(name: "Entry") {
name
fields {
name
type {
name
kind
}
}
}
}
{
"data": {
"__type": {
"name": "Entry",
"fields": [
{
"name": "id",
"type": {
"name": "String",
"kind": "SCALAR"
}
},
{
"name": "author",
"type": {
"name": "User",
"kind": "OBJECT"
}
},
...

24. Introspection
•
•
•

25. GraphiQL (tools)

26. DEMO

27. GraphQL
• N + 1
•
•

28. React + Relay ( )

29. Relay Modan
Facebook Developer Conference
2017/04/18 19