GraphQL for React Developers

In this workshop, participants will learn how to leverage GraphQL to build powerful and efficient backends for their React applications.

Transcript

1. @glnnrys · glennreyes.com
   GraphQL
   For React Developers
   

   View Slide

2. Glenn Reyes
   @glnnrys · glennreyes.com
   Software Engineer, Tech Speaker &
   Workshop Instructor
   
   
   Head of Developer Relations at Kadena
   

   View Slide

3. Plan for today
   GraphQL for React Developers
   1. Intro
   
   
   2. Learn GraphQL basics
   
   
   3. Build GraphQL queries & mutations
   
   
   4. Get familiar with the GraphQL client
   
   
   5. Implement queries & mutations on the client
   
   
   6. Access control & authorization
   
   
   7. Production deployment
   15 mins
   
   
   45 mins
   
   
   45 mins
   
   
   15 mins
   
   
   45 mins
   
   
   15 mins
   
   
   15 mins
   

   View Slide

4. GraphQL
   

   View Slide

5. Query Language for APIs
   

   View Slide

6. View Slide

7. Ask for what you want
   And get predictable results
   

   View Slide

8. View Slide

9. State of GraphQL
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Describe your data
    

    View Slide

16. View Slide

17. User
    

    View Slide

18. Post
    

    View Slide

19. Post
    User
    

    View Slide

20. User Post
    

    View Slide

21. User Post
    name
    
    
    email
    
    
    username
    
    
    bio
    
    
    age
    
    
    posts
    message
    
    
    from
    
    
    reactions
    

    View Slide

22. Schema Definition Language
    Or just
    –
    SDL
    

    View Slide

23. View Slide

24. GraphQL scalar types
    That are available out of the box
    • Int
    
    
    • Float
    
    
    • String
    
    
    • Boolean
    
    
    • ID
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. Ask for what you want
    

    View Slide

30. Ask for what you want
    and get predictable results
    

    View Slide

31. View Slide

32. View Slide

33. Language-agnostic
    

    View Slide

34. View Slide

35. Why GraphQL?
    

    View Slide

36. Single Endpoint
    Flexibility
    
    
    for Frontend Teams
    Evolvable API design
    Real-time data with
    Subscriptions
    Exact
    
    Data Retrieval
    Introspection
    Rich
    
    
    Ecosystem &
    Tooling
    Aggregated Data
    Sources
    Here’s another
    
    Strong Typed Schema
    

    View Slide

37. Stack without GraphQL
    

    View Slide

38. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql-
    fi
    t-in-the-stack-modern-app-development-with-graphql
    

    View Slide

39. Stack with GraphQL
    

    View Slide

40. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql-
    fi
    t-in-the-stack-modern-app-development-with-graphql
    

    View Slide

41. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql-
    fi
    t-in-the-stack-modern-app-development-with-graphql
    

    View Slide

42. Tooling
    

    View Slide

43. GraphQL Explorers
    

    View Slide

44. GraphiQL
    

    View Slide

45. Apollo Explorer
    

    View Slide

46. Let’s code!
    github.com/glennreyes/react-graphql-workshop
    

    View Slide