The AJAX, The REST and The GraphQL

Иван Чернов (Ostrovok.ru) @ MoscowPython Meetup 47

"Рассмотрим историю того, как люди писали API для современного веба: как всё было весело и просто в начале, с какими трудностями сталкивались и какие паттерны применяли. После чего плавно подведем почему GraphQL является логичный эволюцией на возникшие трудности и посокрушаемся, что решение это не для всех".

Видео: http://www.moscowpython.ru/meetup/47/the-ajax-the-rest-and-the-graphql/

Transcript

1. The AJAX,
   The REST &
   The GraphQL
   Ivan Chernov, July 2017
   

   View Slide

2. About me
   ● Python developer @ Ostrovok.ru
   ● Maintain and develop:
   ○ Site backend
   ○ Email marketing platform
   ○ Booking service
   

   View Slide

3. About me
   ● Python developer @ Ostrovok.ru
   ● Maintain and develop:
   ○ Site backend
   ○ Email marketing platform
   ○ Booking service
   ● Past three month also work on frontend (:
   

   View Slide

4. What’s the problem?
   {
   "status": "error",
   "error": "status"
   }
   

   View Slide

5. It’s simple!
   {
   "status": "error", # request status
   "error": "status" # wrong status in DB
   }
   

   View Slide

6. Agenda
   ● Brief history
   ● REST
   ● GraphQL
   ○ Overview
   ○ Comparison to REST
   ○ Practical notes
   

   View Slide

7. First attempt
   
   
   Hello world!
   Who did this in notepad.exe?
   
   
   

   View Slide

8. Asynchronous
   Javascript
   And
   XML
   Browser
   UI
   Javascript
   Web server
   Database
   Server side
   

   View Slide

9. View Slide

10. REST is an architecture pattern
    ● Client-Server
    ● Layered System
    ● Stateless
    ● Cacheability
    ● Uniform Interface
    

    View Slide

11. REST is an architecture pattern
    ● Client-Server
    ● Layered System
    ● Stateless
    ● Cacheability
    ● Uniform Interface
    

    View Slide

12. REST applied to Web service
    ● Two URL type
    ○ https://my.cool.blog/posts/
    ○ https://my.cool.blog/posts/1/
    ● HTTP verbs for manipulation
    ○ Read - GET
    ○ Create/Update/Delete - POST/PUT/DELETE
    

    View Slide

13. View Slide

14. GraphQL
    ● Query language for your API
    

    View Slide

15. GraphQL
    ● Query language for your API
    ○ Backend defines scheme & queries
    

    View Slide

16. GraphQL
    ● Query language for your API
    ○ Backend defines scheme & queries
    ○ Client sends a request with the queries
    

    View Slide

17. GraphQL
    ● Query language for your API
    ○ Backend defines scheme & queries
    ○ Client sends a request with the queries
    ○ And gets the data in single response
    

    View Slide

18. type User {
    id: ID
    username: String
    avatarUrl: String
    }
    type Comment {
    post: Post
    text: String
    rating: Int
    author: User
    createdAt: Date
    }
    Describe your schema
    type Post {
    id: ID
    title: String
    body: String
    preview: String
    author: User
    comments: [Comment]
    }
    

    View Slide

19. pip install graphene-django
    

    View Slide

20. Django graphene I
    # app/blog/schema.py
    import graphene
    from graphene_django.types import DjangoObjectType
    from .models import Post
    class PostType(DjangoObjectType):
    class Meta:
    model = Post
    

    View Slide

21. Django graphene II
    class Query(graphene.AbstractType):
    post = graphene.Field(PostType, id=graphene.Int(required=True))
    def resolve_post(self, args, context, info):
    return Post.objects.prefetch_related(“comments”).filter(id=args[“id”])
    

    View Slide

22. GraphQL - get post title
    Request
    {
    post(id: 1) {
    title
    }
    }
    Response
    {
    “post”: {
    “title”: “Hello!”
    }
    }
    

    View Slide

23. REST - get post title
    Request
    GET
    /posts/1/
    Response
    {
    “post”: {
    “title”: “Hello!”,
    “body”: “...”,
    “user_id”: 1,
    ...
    }
    }
    

    View Slide

24. REST - get post title
    Request
    GET
    /posts/1/?fields=title
    Response
    {
    “post”: {
    “title”: “Hello!”
    }
    }
    

    View Slide

25. GraphQL - post & comments
    Request
    {
    post(id: 1) {
    title
    comments {
    text
    }
    }
    }
    Response
    {
    “post”: {
    “title”: “Hello!”,
    “comments”: [{
    “text”: “Hi!”
    }]
    }
    }
    

    View Slide

26. REST - post & comments
    Request
    GET
    /posts/1/?fields=title
    Response
    {
    “post”: {
    “title”: “Hello!”
    }
    }
    

    View Slide

27. REST - post & comments
    Request
    GET
    /posts/1/comments/
    Response
    {
    “comments”: [{
    “text”: “Hi!”
    }]
    }
    

    View Slide

28. REST - post & comments
    Request
    GET
    /posts/1/?with=comment
    s
    Response
    {
    “post”: {
    “title”: “Hello!”,
    “comments”: [{
    “text”: “Hi!”
    }]
    }
    }
    

    View Slide

29. Django graphene III
    class Query(graphene.AbstractType):
    post = graphene.Field(PostType, id=graphene.Int(required=True))
    me = graphene.Field(UserType)
    def resolve_post(self, args, context, info):
    return Post.objects.prefetch_related(“comments”).filter(id=args[“id”])
    def resolve_me(self, args, context, info):
    # context is same as request
    if context.user.is_authenicated():
    return context.user
    

    View Slide

30. GraphQL - profile, post & comments
    Request
    {
    me {
    username
    },
    post(id: 1) {
    ...
    }
    }
    Response
    {
    “me”: {
    “username”: “Ivan”
    },
    “post”: {
    ...
    }
    }
    

    View Slide

31. REST - profile, post & comments
    Request
    GET
    /posts/1/?with=comment
    s
    Response
    {
    “post”: {
    “title”: “Hello!”,
    “comments”: [{
    “text”: “Hi!”
    }]
    }
    }
    

    View Slide

32. REST - profile, post & comments
    Request
    GET
    /me/
    Response
    {
    “me”: {
    “username”: “Ivan”
    }
    }
    

    View Slide

33. Query language (Query def)
    Request
    query
    PostAndComments($postId: Int)
    {
    post(id: $postId) {
    title
    comments {
    text
    }
    }
    Variables
    {
    “postId”: 1
    }
    

    View Slide

34. Query language (other features)
    ● Defer/Stream
    

    View Slide

35. Query language (other features)
    ● Defer/Stream
    ● Subscriptions
    

    View Slide

36. Query language (other features)
    ● Defer/Stream
    ● Subscriptions
    ● Mutations
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. Practical notes I
    ● Libraries are not good
    ○ No stable libs for some langs (golang)
    ○ Not all features are implemented (python)
    

    View Slide

42. Practical notes II
    ● If you have microservices
    ○ Don’t implement GraphQL in each of them
    ○ Do API gateway with GraphQL to REST
    ■ Apollo Server (node.js)
    

    View Slide

43. Practical notes III
    ● GraphQL schema != database schema
    ○ Database schema describes how you store
    the data
    

    View Slide

44. Practical notes III
    ● GraphQL schema != database schema
    ○ Database schema describes how you store
    the data
    ○ GraphQL schema describes how clients use
    the data
    

    View Slide

45. Practical notes III
    ● GraphQL schema != database schema
    ○ Database schema describes how you store
    the data
    ○ GraphQL schema describes how clients use
    the data
    ○ P.S. blog was an example
    

    View Slide

46. GraphQL Summary
    Pros Cons
    

    View Slide

47. GraphQL Summary
    Pros
    1. Strongly typed
    Cons
    

    View Slide

48. GraphQL Summary
    Pros
    1. Strongly typed
    2. Automated docs
    Cons
    

    View Slide

49. GraphQL Summary
    Pros
    1. Strongly typed
    2. Automated docs
    3. Flexible
    Cons
    

    View Slide

50. GraphQL Summary
    Pros
    1. Strongly typed
    2. Automated docs
    3. Flexible
    Cons
    1. Lack of control
    

    View Slide

51. GraphQL Summary
    Pros
    1. Strongly typed
    2. Automated docs
    3. Flexible
    Cons
    1. Lack of control
    2. Query optimization
    

    View Slide

52. GraphQL Summary
    Pros
    1. Strongly typed
    2. Automated docs
    3. Flexible
    Cons
    1. Lack of control
    2. Query optimization
    3. Rate limit
    

    View Slide

53. View Slide

54. Links
    1. Read
    a. http://graphql.org
    b. http://docs.graphene-python.org/en/latest/
    c. http://engineering.remind.com/graphql-initiative-at-remind/
    d. https://developer.github.com/v4/guides/intro-to-graphql/
    2. Try
    a. https://github.com/vanadium23/mp-graphql-blog/
    b. https://developer.github.com/v4/explorer/
    

    View Slide

55. Questions?
    P.S. follow me → @vanadium23
    

    View Slide