The Evolution of GraphQL Code Generation

Transcript

1. The Evolution of GraphQL Code Generation Laurin Quast @n1rual @n1ru4l
2. Laurin Quast Open Source Developer 
 @ The Guild From Germany 🇩🇪 About Me
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
4. Who Has Worked With GraphQL Clients? ✋
5. Who Used Tools for Generating Code From GraphQL? ✋
6. Who Used Relay Compiler? ✋
7. Who Used GraphQL Code Generator? ✋
8. GraphQL Code Generator Got Me My Current Job. 🎉
9. I wasn’t happy with the generated Types… So I started contributing.
10. How Did Code Generation Change Over the Years?
11. Manual Typings 2015 - 2016
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 💢
13. Generated Typings 2017
14. Generated Typings 2017 • First GraphQL Code Generator release 🎉 • Use GraphQL schema for code generation 📒 • Automate the process 🤖 • Reduce human error 📉
15. Generated Code 2018 - 2019
16. use🪝 React.js started something…
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 🤝
18. Further Observations…
19. Most GraphQL Clients support Generics for Variable and Execution Result Types
20. Most GraphQL Clients use the GraphQL AST for normalised Caching
21. We Are Maintaining a Lot of Libraries
22. The Quest of Reducing Redundant Code Generation
23. Embed Types in AST 🤯
25. Integration With Ease
26. Collaboration for Support • Apollo Client • Urql • GraphQL Request
27. Generated Code 2020
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 ⏩
29. Further Observations…
30. Zombie Code 🧟 • Delete .tsx/.ts File 🚮 • Forget to delete .graphql fi le 🫥 • Unused code is generated 😑
31. GraphQL Solved Over- Fetching, Right?
32. 🙈
33. Describe UI Components With Fragments 🤔
34. <Avatar />
35. <FriendListItem /> Laurin
36. <FriendList /> Laurin Dotan Saihaj
37. We Just Solved 2 Problems.
38. Fragment & Operation Co-Location
39. <Avatar />
40. <FriendListItem /> Laurin
41. <FriendList /> Laurin Dotan Saihaj
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
43. Relay
44. Now Also in the GraphQL Code Generator Client Preset
45. Thank You! Laurin Quast @n1rual @n1ru4l