$30 off During Our Annual Pro Sale. View Details »

GraphQL for React Developers

Glenn Reyes
September 28, 2023

GraphQL for React Developers

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

Glenn Reyes

September 28, 2023
Tweet

More Decks by Glenn Reyes

Other Decks in Technology

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