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

Getting started with GraphQL

Getting started with GraphQL

The 4th Weekly company-internal Agilize DevTalk of November, 2017.

Thiago Colares

November 24, 2017
Tweet

More Decks by Thiago Colares

Other Decks in Technology

Transcript

  1. GETTING STARTED
    WITH GraphQL
    Agilize Cloud Accounting, 24/11/2017
    Weekly company-internal DevTalks

    View full-size slide

  2. Hallo!
    I’M THIAGO COLARES
    Agile manager
    Full stack developer
    Open source
    Co-founder @ Agilize Cloud Accounting
    @thicolares

    View full-size slide

  3. 1.
    DEFINE: GraphQL

    View full-size slide

  4. WHAT IS GRAPHQL
    ○ Declarative data fetching
    ○ Alternative to REST
    ○ Single endpoint → responds to queries

    View full-size slide

  5. /authors/
    /authors//books
    /authors//followers
    3 ENDPOINTS

    View full-size slide

  6. query
    query
    query
    1 SINGLE
    ENDPOINT

    View full-size slide

  7. 2.
    CHARACTERISTICS

    View full-size slide

  8. GraphQL TIMELINE
    ○ Developed by Facebook on 2012
    ○ Presented → React.js Conf 2015
    ○ Is not for React Developers
    ○ Other companies had the same initiative
    ○ Netflix → Falcor
    ○ Cousera → Now uses GraphQL

    View full-size slide

  9. REST CHALLENGES
    ○ Need for efficient data loading (mobile)
    ○ Variety of different frontend frameworks
    ○ Rapid feature development

    View full-size slide

  10. GraphQL BENEFITS
    ○ No mover over or underfetching
    ○ Almost non API if the interface changes
    ○ Faster feedbacks cycles

    View full-size slide

  11. INSIGHTFUL ANALYTICS
    ○ Fine-grained info about what read data
    ○ Evolving and deprecating API

    View full-size slide

  12. 3.
    KEY CONCEPTS

    View full-size slide

  13. type Query {
    ...
    }
    type Mutation {
    ...
    }
    type Subscription {
    ...
    }
    ROOT TYPE

    View full-size slide

  14. query {
    User(id: 123) {
    name
    posts {
    title
    }
    }
    }
    QUERY
    HTTP POST

    View full-size slide

  15. {
    "data": {
    "User": {
    "name": "Joston Muriel",
    "posts": [
    {title: "Hello, it's me"}
    {title: "Lines in the sand"}
    ]
    }
    }
    }
    RESPONSE
    RESPONSE

    View full-size slide

  16. SCHEMA
    ○ Strong type system
    ○ Schema as client-server contract
    ○ Client and server can work independently
    ○ Schema Definition Language

    View full-size slide

  17. type Person {
    name: String!
    age: Int!
    }
    DEFINING SIMPLE TYPES
    ! → required

    View full-size slide

  18. type Person {
    name: String!
    age: Int!
    }
    ADDING A RELATION
    type Post {
    title: String!
    author: Person!
    }

    View full-size slide

  19. type Person {
    name: String!
    age: Int!
    posts: [Post!]!
    }
    ADDING A HAS-MANY RELATION
    type Post {
    title: String!
    author: Person!
    }

    View full-size slide

  20. WRITING DATA WITH MUTATIONS
    ○ A query too
    ○ You can ask for the returning fields
    ○ Even nested ones

    View full-size slide

  21. 3 KINDS OF MUTATIONS
    ○ creating new data
    ○ updating existing data
    ○ deleting existing data

    View full-size slide

  22. A MUTATION
    mutation {
    createPerson(name: "Bob", age: 36) {
    name
    age
    }
    }
    Similar syntax. Mutation keyword. Special root field.

    View full-size slide

  23. DEFINING A MUTATION
    type Mutation {
    createPerson(name: String!, age: String!) Person!
    ...
    }

    View full-size slide

  24. 5.
    NODE EXAMPLE

    View full-size slide


  25. Nescit cedere

    View full-size slide

  26. THANKS!
    Thiago Colares
    @thicolares

    View full-size slide