Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to GraphQL

Introduction to GraphQL

My OpenFest presentation about GraphQL.

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

Radoslav Stankov

October 08, 2015
Tweet

More Decks by Radoslav Stankov

Other Decks in Programming

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