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

GraphQL

 GraphQL

Radoslav Stankov

August 15, 2015
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. GraphQL
    Radoslav Stankov 15/08/2015

    View full-size slide

  2. Radoslav Stankov
    @rstankov

    http://rstankov.com

    http://blog.rstankov.com

    http://github.com/rstankov

    View full-size slide

  3. https://github.com/rstankov/it-tour

    View full-size slide

  4. GET /api/events/15/sessions
    {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    speaker_id: 1,
    track: 2,
    }

    View full-size slide

  5. GET /api/speakers/1
    {
    id: "1",
    name: "Radoslav Stankov"
    }

    View full-size slide

  6. Rest Client
    Rest Server

    View full-size slide

  7. Rest Client
    Rest Server
    /api/event/15/sessions

    View full-size slide

  8. Rest Client
    Rest Server
    /api/event/15/sessions
    /api/speakers/{x}
    (for 13 speakers)

    View full-size slide

  9. Rest Client
    Rest Server
    /api/event/15/sessions
    /api/speakers/{x}
    (for 13 speakers)

    View full-size slide

  10. …approach 2

    View full-size slide

  11. GET /api/events/15/sessions
    {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    speaker: {
    id: 1,
    name: "Radoslav Stankov"
    }
    }

    View full-size slide

  12. GET /api/events/15/sessions
    {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    speaker: {
    id: 1,
    name: "Radoslav Stankov",

    photo: "/speaker/photo/1/thumb.jpg"
    }
    }

    View full-size slide

  13. …but over time

    View full-size slide

  14. {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    description: "... stuff about Rado",
    speaker: {
    id: 1,
    name: "Radoslav Stankov",

    photo: "/speaker/photo/1/thumb.jpg",

    big_photo: "/speaker/photo/1/big.jpg",

    description: "... stuff about Rado",
    links: [
    "http://rstankov.com",
    "http://blog.rstankov.com",
    "http://producthunt.com",

    ],
    GET /api/events/15/sessions

    View full-size slide

  15. id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    description: "... stuff about Rado",
    speaker: {
    id: 1,
    name: "Radoslav Stankov",

    photo: "/speaker/photo/1/thumb.jpg",

    big_photo: "/speaker/photo/1/big.jpg",

    description: "... stuff about Rado",
    links: [
    "http://rstankov.com",
    "http://blog.rstankov.com",
    "http://producthunt.com",

    ],
    alabla1: "foo bar",
    alabla2: "foo bar",
    alabla3: "foo bar"
    },

    alabla1: "foo bar",
    alabla2: "foo bar",
    alabla3: "foo bar"
    }
    GET /api/events/15/sessions

    View full-size slide

  16. …approach 3

    View full-size slide

  17. Rest Client
    Rest Server

    View full-size slide

  18. Rest Client
    Rest Server
    endpoint 1
    feature 1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. {
    id: 175,
    start_at: "11:00",
    title: "GraphQL",
    track: 2,
    speaker: {
    id: 1,
    name: "Radoslav Stankov",

    photo: "/speaker/photo/1/thumb.jpg"
    }
    }

    View full-size slide

  23. {
    id
    start_at
    title
    track
    speaker: {
    id
    name

    photo
    }
    }

    View full-size slide

  24. GET /graphql
    Request Body Response Body

    View full-size slide


  25. {
    event(id: 15) {
    sessions {
    id
    start_at
    title
    track
    speaker {
    id
    name
    picture
    }
    }
    }
    }


    GET /graphql
    Request Body Response Body

    View full-size slide


  26. {
    event(id: 15) {
    sessions {
    id
    start_at
    title
    track
    speaker {
    id
    name
    picture
    }
    }
    }
    }


    GET /graphql
    Request Body Response Body

    View full-size slide


  27. {
    event(id: 15) {
    sessions {
    id
    start_at
    title
    track
    speaker {
    id
    name
    picture
    }
    }
    }
    }


    {
    "data": {
    "event": {
    "sessions": [{
    "id": 175,
    "start_at": "11:00",
    "title": "GraphQL",
    "track": 2,
    "speaker": {
    "id": 1,
    "name": "Rado",
    "picture": null
    }
    }]
    }
    }
    }
    GET /graphql
    Request Body Response Body

    View full-size slide

  28. It is that simple

    View full-size slide


  29. https://facebook.github.io/graphql


    View full-size slide

  30. 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 full-size slide

  31. Architecture

    GraphQL Library

    (Per-Language)


    Type

    Definitions


    Application

    Code


    View full-size slide

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

    View full-size slide

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

    View full-size slide


  34. https://facebook.github.io/react


    View full-size slide


  35. https://facebook.github.io/relay


    View full-size slide

  36. Query

    {
    event(id: 15) {
    sessions {
    id
    start_at
    title
    track
    speaker {
    id
    name
    picture
    }
    }
    }
    }



    View full-size slide

  37. Query

    {
    event(id: 15) {
    sessions {
    id
    start_at
    title
    track
    speaker {
    id
    name
    picture
    }
    }
    }
    }



    {
    "data": {
    "event": {
    "sessions": [{
    "id": 175,
    "start_at": "11:00",
    "title": "GraphQL",
    "track": 2,
    "speaker": {
    "id": 1,
    "name": "Rado",
    "picture": null
    }
    }]
    }
    }
    }

    View full-size slide

  38. Mutation

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

    View full-size slide

  39. Documentation

    {
    __schema {
    types {
    name
    fields {
    name
    type {
    name
    kind
    ofType {
    name
    kind
    }
    }
    }
    }
    }
    }
    {
    "data": {
    "__schema": {
    "types": [{
    "name": "RootQueryType",
    "fields": [
    {
    "name": "events",
    "type": {
    "name": null,
    "kind": "LIST",
    "ofType": {
    "name": "Event",
    "kind": "OBJECT"
    }
    }
    },
    {
    "name": "event",
    "type": {

    View full-size slide

  40. {
    id
    start_at
    title
    track
    speaker: {
    id
    name

    smallPhoto: photo(size: 100)

    bigPhoto: photo(size: 400)
    }
    }
    Cool tricks

    View full-size slide

  41. 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 full-size slide

  42. Issues
    • New, just a draft specification
    • No reliable graphql server libraries, yet
    • No reliable graphql client libraries, yet
    • Mutations are weird
    • Best practices and solutions
    • Large datasets

    View full-size slide

  43. http://jsonapi.org/

    View full-size slide

  44. {
    "links": {
    "self": "http://example.com/events/15/sessions",
    "next": "http://example.com/events/15/sessions?page[offset]=2",
    "last": "http://example.com/events/15/sessions?page[offset]=10"
    },
    "data": [{
    "type": "sesssion",
    "id": "175",
    "attributes": {
    "title": "GraphQL",
    "track": "2",
    "start_at": "11:00"
    },
    "relationships": {
    "speaker": {
    "links": {
    "self": "http://varnaconf.com/sessions/175/relationships/speaker",
    "related": "http://varnaconf.com/speaker/1"
    },
    "data": { "type": "speaker", "id": "1" }
    },
    },
    "links": {
    "self": "http://example.com/sessions/175"
    }
    }],

    View full-size slide

  45. "attributes": {
    "title": "GraphQL",
    "track": "2",
    "start_at": "11:00"
    },
    "relationships": {
    "speaker": {
    "links": {
    "self": "http://varnaconf.com/sessions/175/relationships/speaker",
    "related": "http://varnaconf.com/speaker/1"
    },
    "data": { "type": "speaker", "id": "1" }
    },
    },
    "links": {
    "self": "http://example.com/sessions/175"
    }
    }],
    "included": [{
    "type": "speaker",
    "id": "1",
    "attributes": {
    "name": "Radoslav Stankov",
    "picture": "/photos/1/small.jpg",
    },
    "links": {
    "self": "http://varnaconf.com/speaker/1"
    }
    }]

    View full-size slide

  46. https://speakerdeck.com/rstankov/graphql

    View full-size slide

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

    View full-size slide

  48. @rstankov
    Thanks :)

    View full-size slide