Getting Started with GraphQL

GraphQL is a new API standard that provides a more efficient, powerful and flexible alternative to REST. At its core, GraphQL enables declarative data fetching where a client can specify exactly what data it needs from an API. Instead of multiple endpoints that return fixed data structures, a GraphQL server only exposes a single endpoint and responds with precisely the data a client asked for. In this talk, I will give you an introduction to GraphQL and then show you how to use it to access Github’s GraphQL API.

Transcript

1. Introduction to GraphQL
   Jennifer Bland
   

   View Slide

2. Three Truths and One Lie
   •I have visited 82 countries
   •I graduated from college before IBM introduced the IBM PC
   •My home is 400 sq ft
   •I have never been west of the Mississippi River
   

   View Slide

3. www.jenniferbland.com
   @ratracegrad
   ratracegrad@gmail.com
   youtube.com/c/jenniferbland
   !3
   

   View Slide

4. What Is GraphQL?
   

   View Slide

5. A programming language
   !5
   

   View Slide

6. A special type
   of database
   !6
   

   View Slide

7. A library
   !7
   

   View Slide

8. What Is GraphQL?
   

   View Slide

9. Graph QUERY
   LANGUAGE
   

   View Slide

10. Why GraphQL?
    

    View Slide

11. !1 1
    

    View Slide

12. !1 2
    

    View Slide

13. Get the Data 13
    /dynamic-content/projects/v1/1
    /dynamic-content/homepage/v2/1
    

    View Slide

14. !1 4
    

    View Slide

15. Why GraphQL?
    

    View Slide

16. View Slide

17. !1 7
    

    View Slide

18. !1 8
    

    View Slide

19. Components
    

    View Slide

20. Schema
    

    View Slide

21. View Slide

22. 22
    // GET ‘/graphql
    {
    projects {

    title
    image
    }
    }
    // result
    {
    projects {

    title: “Build a Fire Pit
    image: “firepit.png”
    }
    }
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. • Schema is strongly-typed
    • Client picks what they need
    • It’s fast
    • It’s flexible
    

    View Slide

27. Queries
    

    View Slide

28. Queries 28
    query {
    projects
    }
    query {
    projects {
    title
    image
    }
    

    View Slide

29. Queries 29
    query {
    relatedProjects { # this is an array
    title
    image
    details {
    description
    tools
    category
    }
    

    View Slide

30. Queries 30
    query {
    relatedProjects(id: 72113) {
    title
    image
    details {
    description
    tools
    category
    }
    

    View Slide

31. Queries 31
    query getRelatedProject($id: String) {
    relatedProjects(id: $id) {
    title
    image
    details {
    description
    tools
    category
    }
    

    View Slide

32. Resolvers
    

    View Slide

33. Resolvers 33
    Query: {
    relatedProjects (root, args) {
    return Projects.find({ id: args.id });
    }
    }
    

    View Slide

34. Resolvers 34
    Post: {
    
    author(post) {
    
    return Users.find({ id: post.authorId})
    
    },
    
    commentsCount(post) {
    
    return Comments.find({ postId: post.id}).count()
    
    }
    
    }
    

    View Slide

35. Demo
    

    View Slide

36. Resources
    graphqlweekly.com
    howtographql.com
    graphqlhub.com
    developer.github.com/v4/explorer/
    

    View Slide

37. Three Truths and One Lie
    •I have visited 82 countries
    •I graduated from college before IBM introduced the IBM PC
    •My home is 400 sq ft
    •I have never been west of the Mississippi River
    

    View Slide

38. Jennifer Bland
    www.jenniferbland.com
    ratracegrad@gmail.com
    

    View Slide