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

The Evolution of GraphQL Code Generation

Laurin Quast
September 15, 2023

The Evolution of GraphQL Code Generation

Laurin Quast

September 15, 2023
Tweet

More Decks by Laurin Quast

Other Decks in Technology

Transcript

  1. The Evolution of
    GraphQL Code
    Generation
    Laurin Quast
    @n1rual
    @n1ru4l

    View Slide

  2. Laurin Quast


    Open Source Developer

    @ The Guild


    From Germany 🇩🇪


    About Me

    View Slide

  3. Projects We Build and Maintain
    GraphQL Hive
    The GraphQL schema registry
    and insights platform for teams


    GraphQL Yoga
    The cross-platform batteries
    included GraphQL HTTP server.


    GraphQL Inspector
    Schema validation & breaking
    change detection for CI/CD


    GraphQL Code Generator
    Generate code and type-
    de
    fi
    nitions for any language


    GraphQL Tools
    Swiss knife for GraphQL
    schema building


    GraphQL Mesh
    Convert any data sources to a
    GraphQL SDK or gateway


    View Slide

  4. Who Has Worked With
    GraphQL Clients? ✋

    View Slide

  5. Who Used Tools for
    Generating Code From
    GraphQL? ✋

    View Slide

  6. Who Used Relay
    Compiler? ✋

    View Slide

  7. Who Used GraphQL
    Code Generator? ✋

    View Slide

  8. GraphQL Code
    Generator Got Me My
    Current Job. 🎉

    View Slide

  9. I wasn’t happy with
    the generated
    Types…
    So I started
    contributing.

    View Slide

  10. How Did
    Code Generation
    Change Over the Years?

    View Slide

  11. Manual Typings
    2015 - 2016

    View Slide

  12. Manual Typings
    2015 - 2016
    • GraphQL & TypeScript adoption in early
    stages 🌱
    • Create React App & TypeScript = 💩
    • Typing HTTP calls is a manual process 😩
    • Typing HTTP calls is an error prone
    process 💢

    View Slide

  13. Generated Typings
    2017

    View Slide

  14. Generated Typings
    2017
    • First GraphQL Code Generator release 🎉
    • Use GraphQL schema for code generation 📒
    • Automate the process 🤖
    • Reduce human error 📉

    View Slide

  15. Generated Code
    2018 - 2019

    View Slide

  16. use🪝
    React.js started something…

    View Slide

  17. Generated Code
    2018 - 2019
    • Place GraphQL operations within .graphql
    fi
    les
    📄
    • Generate React hooks but also code for other
    frameworks🪝
    • No need for importing and annotating types
    within code 🤝

    View Slide

  18. Further Observations…

    View Slide

  19. Most GraphQL Clients
    support Generics for
    Variable and
    Execution Result
    Types

    View Slide

  20. Most GraphQL Clients
    use the GraphQL AST
    for normalised
    Caching

    View Slide

  21. We Are Maintaining a Lot
    of Libraries

    View Slide

  22. The Quest of Reducing
    Redundant Code
    Generation

    View Slide

  23. Embed Types in AST 🤯

    View Slide

  24. View Slide

  25. Integration With Ease

    View Slide

  26. Collaboration for Support
    • Apollo Client
    • Urql
    • GraphQL Request

    View Slide

  27. Generated Code
    2020

    View Slide

  28. Generated Code
    2020
    • Blueprint for clients to support infering
    GraphQL TypeScript types embedded in AST
    📄
    • Generate AST instead of React hooks 🪝
    • Skip GraphQL operation parsing on the client

    View Slide

  29. Further Observations…

    View Slide

  30. Zombie Code 🧟
    • Delete .tsx/.ts File 🚮
    • Forget to delete .graphql
    fi
    le 🫥
    • Unused code is generated 😑

    View Slide

  31. GraphQL Solved Over-
    Fetching, Right?

    View Slide

  32. 🙈

    View Slide

  33. Describe UI Components
    With Fragments 🤔

    View Slide


  34. View Slide


  35. Laurin

    View Slide


  36. Laurin
    Dotan
    Saihaj

    View Slide

  37. We Just Solved
    2 Problems.

    View Slide

  38. Fragment & Operation
    Co-Location

    View Slide


  39. View Slide


  40. Laurin

    View Slide


  41. Laurin
    Dotan
    Saihaj

    View Slide

  42. No Zombie Code & No Over-Fetching
    • Explicitly de
    fi
    ne the data requirements of a
    component
    • Compose GraphQL fragments into a single
    GraphQL operation
    • Only fetch what is needed for the view

    View Slide

  43. Relay

    View Slide

  44. Now Also in the
    GraphQL Code Generator
    Client Preset

    View Slide

  45. Thank You!
    Laurin Quast
    @n1rual
    @n1ru4l

    View Slide