Getting started with GraphQL

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

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