Introduction to GraphQL

My OpenFest presentation about GraphQL.

(Video: https://www.youtube.com/watch?v=-dAI5tSSPGA)

Transcript

1. Introduction
   to
   GraphQL
   Radoslav Stankov 08/10/2015
   

   View Slide

2. Radoslav Stankov
   @rstankov
   
   http://rstankov.com

   http://blog.rstankov.com
   
   http://github.com/rstankov
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. GET /api/posts?date=2015-10-31
    {
    id: 1,
    title: "Post title",
    tagline: "Post headline",
    votes_count: 1,
    comments_count: 1,
    url: '/category/slug',
    thumbnail_url: 'assets.producthunt.com/uuid',
    hunter_id: 1
    }
    

    View Slide

13. View Slide

14. View Slide

15. GET /api/users/1
    {
    id: 1,
    name: 'User Name',
    handle: 'user_name',
    avatar_url: 'assets.producthunt.com/uuid'
    }
    

    View Slide

16. Rest Client
    Rest Server
    

    View Slide

17. Rest Client
    Rest Server
    /api/posts?date=2015-10-31
    

    View Slide

18. Rest Client
    Rest Server
    /api/posts?date=2015-10-31
    /api/users/{x}
    (for X users)
    

    View Slide

19. Rest Client
    Rest Server
    /api/posts?date=2015-10-31
    /api/users/{x}
    (for X users)
    

    View Slide

20. …approach 2
    

    View Slide

21. GET /api/posts?date=2015-10-31
    {
    id: 1,
    title: "Post title",
    tagline: "Post headline",
    votes_count: 1,
    comments_count: 1,
    url: '/category/slug',
    thumbnail_url: 'assets.producthunt.com/uuid',
    hunter: {
    id: 1,
    name: 'User Name',
    handle: 'user_name',
    avatar_url: 'assets.producthunt.com/uuid'
    }
    }
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. GET /api/posts?date=2015-10-31
    {
    id: 1,
    title: "Post title",
    tagline: "Post headline",
    votes_count: 1,
    comments_count: 1,
    url: '/category/slug',
    thumbnail_url: 'assets.producthunt.com/uuid',
    hunter: {
    id: 1,
    name: 'User Name',
    handle: 'user_name',
    avatar_url: 'assets.producthunt.com/uuid'
    },
    makers: [{
    id: 2,
    name: 'Second User',
    handle: 'second_user',
    avatar_url: 'assets.producthunt.com/uuid'
    }]
    }
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. GET /api/posts?date=2015-10-31
    {
    id: 1,
    title: "Post title",
    tagline: "Post headline",
    votes_count: 1,
    comments_count: 1,
    url: '/category/slug',
    thumbnail_url: 'assets.producthunt.com/uuid',
    hunter: {
    id: 1,
    name: 'User Name',
    handle: 'user_name',
    avatar_url: 'assets.producthunt.com/uuid'
    },
    makers: [{
    id: 2,
    name: 'Second User',
    handle: 'second_user',
    avatar_url: 'assets.producthunt.com/uuid'
    }],
    platform: [{
    name: 'iPhone',
    }, {
    name: 'Mac',
    }, {
    name: 'Web',
    }]
    }
    

    View Slide

33. View Slide

34. View Slide

35. …approach 3
    

    View Slide

36. View Slide

37. Rest Client
    Rest Server
    

    View Slide

38. Rest Client
    Rest Server
    endpoint 1
    feature 1
    

    View Slide

39. Rest Client
    Rest Server
    endpoint 1
    feature 1
    endpoint 2
    feature 2
    

    View Slide

40. Rest Client
    Rest Server
    endpoint 1
    feature 1
    endpoint 2
    feature 2
    endpoint 3
    feature 3
    

    View Slide

41. Rest Client
    Rest Server
    endpoint 1
    feature 1
    endpoint 2
    feature 2
    endpoint 3
    feature 3
    endpoint N
    feature N
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. {
    id: 1,
    title: "Post title",
    tagline: "Post headline",
    votes_count: 1,
    hunter: {
    id: 1,
    avatar_url: 'assets.producthunt.com/uuid'
    },
    makers: [{
    id: 2,
    avatar_url: 'assets.producthunt.com/uuid'
    }]
    }
    

    View Slide

49. {
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    

    View Slide

50. View Slide

51. GET /graphql
    Request Body Response Body
    

    View Slide

52. 

    query {
    post(id: 1){
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    }
    GET /graphql
    Request Body Response Body
    

    View Slide

53. 

    query {
    post(id: 1){
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    }
    GET /graphql
    Request Body Response Body
    

    View Slide

54. 

    query {
    post(id: 1){
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    }
    GET /graphql
    Request Body Response Body
    {
    "data": {
    "post": {
    "id": 1,
    "title": "title",
    "tagline": "tagline",
    "votes_count": 0,
    "hunter": {
    "id": 1,
    "avatar_url": "assets.producthu
    },
    "makers": [
    {
    "id": 1,
    "avatar_url": "assets.product
    }
    ]
    }
    }
    }
    

    View Slide

55. It’s that simple
    

    View Slide

56. 

    https://facebook.github.io/graphql

    

    View Slide

57. GraphQL is a query language created by
    Facebook in 2012 which provides a common
    interface between the client and the server for data
    fetching and manipulations. The client asks for
    various data from the GraphQL server via queries.
    

    View Slide

58. Architecture
    

    GraphQL Library

    (Per-Language)

    

    Type

    Definitions

    

    Application

    Code

    

    View Slide

59. GraphQL
    • Single endpoint
    • Not just a library
    • Application-Layer Protocol
    • Server agnostic
    • Strongly-typed
    • Client-specified queries
    • Hierarchical
    

    View Slide

60. Tries to solve
    • N+1 API queries
    • API response bloat
    • Documentation
    • Ad Hoc Endpoints
    • Structure issues
    

    View Slide

61. QueryType = GraphQL::ObjectType.define do
    name 'Query'
    description 'The query root for this schema'
    field :post do
    type PostType
    description 'The post'
    argument :id, types.Int, 'Post id'
    resolve -> (obj, args, context) do
    Post.find args['id']
    end
    end
    end
    Ruby Example
    

    View Slide

62. PostType = GraphQL::ObjectType.define do
    name 'Post'
    field :id, types.Int
    field :title, types.String
    field :tagline, types.String
    field :votes_count, types.Int
    field :comments_count, types.Int
    field :thumbnail_url, types.String
    field :hunter do
    type -> { UserType }
    resolve -> (obj, args, context) do
    obj.user
    end
    end
    field :makers do
    type -> { types[UserType] }
    resolve -> (obj, args, context) do
    obj.makers
    end
    end
    end
    Ruby Example
    

    View Slide

63. Query
    

    query {
    post(id: 1){
    id
    title
    tagline
    votes_count
    hunter {
    id
    avatar_url
    }
    makers {
    id
    avatar_url
    }
    }
    }
    {
    "data": {
    "post": {
    "id": 1,
    "title": "title",
    "tagline": "tagline",
    "votes_count": 0,
    "hunter": {
    "id": 1,
    "avatar_url": "assets.producthun
    },
    "makers": [
    {
    "id": 1,
    "avatar_url": "assets.producth
    }
    ]
    }
    }
    }
    

    View Slide

64. Mutation
    

    mutation {
    createUser(name: "Rado") {
    id
    }
    }
    {
    "data": {
    "createSpeaker": {
    "id": 2
    }
    }
    }
    

    View Slide

65. Documentation
    

    query {
    __schema {
    types {
    name
    fields {
    name
    type {
    name
    kind
    ofType {
    name
    kind
    }
    }
    }
    }
    }
    }
    {
    "data": {
    "__schema": {
    "types": [
    {
    "name": "Query",
    "fields": [
    {
    "name": "user",
    "type": {
    "name": "Non-Null",
    "kind": "NON_NULL",
    "ofType": {
    "name": "User",
    "kind": "OBJECT"
    }
    }
    },
    {
    "name": "post",
    "type": {
    "name": "Non-Null",
    "kind": "NON_NULL",
    "ofType": {
    "name": "Post",
    "kind": "OBJECT"
    }
    }
    }
    ]
    },
    

    View Slide

66. {
    id
    hunter: {
    id
    name

    small_avatar_url: avatar_url(size: 100)

    big_avatar_url: avatar_url(size: 400)
    }
    }
    Cool tricks
    

    View Slide

67. query withFragments {
    user(id: 4) {
    friends(first: 10) {
    ...friendFields
    }
    mutualFriends(first: 10) {
    ...friendFields
    }
    }
    }
    fragment friendFields on User {
    id
    name
    profilePic(size: 50)
    }
    Cool tricks
    

    View Slide

68. 

    https://facebook.github.io/react

    

    View Slide

69. 

    https://facebook.github.io/relay

    

    View Slide

70. View Slide

71. PostContainer = Relay.createContainer(Post, {
    fragments: {
    post: () => Relay.QL`
    fragment on Post {
    id
    title
    tagline
    votes_count
    }
    `,
    },
    });
    Relay
    

    View Slide

72. Demo
    

    View Slide

73. Issues
    • New, just a draft specification
    • Mutations are weird
    • Best practices and solutions
    • Large datasets
    

    View Slide

74. View Slide

75. https://speakerdeck.com/rstankov/introduction-to-graphql
    

    View Slide

76. https://github.com/rstankov/talks-code
    

    View Slide

77. View Slide

78. View Slide

79. @rstankov
    Thanks :)
    

    View Slide

80. Questions?
    

    View Slide