Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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
  2. 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 💢
  3. Generated Typings 2017 • First GraphQL Code Generator release 🎉

    • Use GraphQL schema for code generation 📒 • Automate the process 🤖 • Reduce human error 📉
  4. 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 🤝
  5. 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 ⏩
  6. Zombie Code 🧟 • Delete .tsx/.ts File 🚮 • Forget

    to delete .graphql fi le 🫥 • Unused code is generated 😑
  7. 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