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 Slide

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

    View Slide

  3. 1.
    DEFINE: GraphQL

    View Slide

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

    View Slide

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

    View Slide

  6. query
    query
    query
    1 SINGLE
    ENDPOINT

    View Slide

  7. DEMO 1

    View Slide

  8. 2.
    CHARACTERISTICS

    View Slide

  9. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. 3.
    KEY CONCEPTS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. DEMO 2

    View Slide

  22. 4.
    MUTATIONS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 5.
    NODE EXAMPLE

    View Slide

  28. DEMO 3

    View Slide


  29. Nescit cedere

    View Slide

  30. THANKS!
    Thiago Colares
    @thicolares

    View Slide