GraphQL for frontend developers.

1. GraphQL and/or REST
Eugene Zharkov

2. REST
Level 0
Level 1
POST http://foo.com/api/
{ user: { name: “John”, surname: “Week” } }
POST http://foo.com/api/users/938
{ user: { name: “John”, surname: “Week” } }

3. REST
Level 2
GET http://foo.com/api/users/938/posts
DELETE http://foo.com/api/users/938
PUT http://foo.com/api/items/39
{ { age: 25 } }

4. REST
[
{ rel: ‘search.users’, uri: ‘/search/users’ },
{ rel: ‘users.block’, uri: ‘/users/938/block’ }
]
Level 3
GET http://foo.com/api/users/938/

7. GraphQL
GET api/books/938
GET api/authors/432
GET /graphql?query={ book(id: "1") { title, author { firstName } } }
GET api/books/432/comments

8. Sharing data in a Microservices Architecture using GraphQL
GraphQL

10. GitHub GraphQL API
https://developer.github.com/v4/explorer/

11. Say something GraphQLish
Enum
Order
Limit
Where IN
Fragment
(inline)

12. Say something GraphQLish
Variable
Declaration
Variable
Usage
Variable
Value

13. Say something GraphQLish
á la PUT

14. Say something GraphQLish
Helper
Validation

15. https://graphql.github.io/learn/
NINJA
GraphQL
REST
MORMON

16. Pros & Cons

17. REST
Project Manager
Frontend Developer
API Developer
Mobile Developer
Add new field
New endpoint for
me
One at a time!
Guys, we are one
happy team!
Where is DELETE
for entity?
Backend Developer

18. • All responsibility belongs to API developer.
• Response can be overloaded with extra data or can miss
something.
• Continuous requests for API extensions or new
endpoints.
Pros & Cons

19. GraphQL

20. • Developer tries to implement an access all available
information.
• Client developer generates query on the client side.
• More responsibility and more time for client development.
• Useful UI for query testing.
• In case of any issues API developer can ask for requested
GraphQL query.
Pros & Cons

21. Questions?
eu.zharkov@gmail.com
@2j2e