The Evolution of GraphQL Code Generation

by Laurin Quast

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Laurin Quast Open Source Developer   @ The Guild From Germany 🇩🇪 About Me

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Who Has Worked With GraphQL Clients? ✋

Slide 5

Slide 5 text

Who Used Tools for Generating Code From GraphQL? ✋

Slide 6

Slide 6 text

Who Used Relay Compiler? ✋

Slide 7

Slide 7 text

Who Used GraphQL Code Generator? ✋

Slide 8

Slide 8 text

GraphQL Code Generator Got Me My Current Job. 🎉

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

How Did Code Generation Change Over the Years?

Slide 11

Slide 11 text

Manual Typings 2015 - 2016

Slide 12

Slide 12 text

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 💢

Slide 13

Slide 13 text

Generated Typings 2017

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Generated Code 2018 - 2019

Slide 16

Slide 16 text

use🪝 React.js started something…

Slide 17

Slide 17 text

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 🤝

Slide 18

Slide 18 text

Further Observations…

Slide 19

Slide 19 text

Most GraphQL Clients support Generics for Variable and Execution Result Types

Slide 20

Slide 20 text

Most GraphQL Clients use the GraphQL AST for normalised Caching

Slide 21

Slide 21 text

We Are Maintaining a Lot of Libraries

Slide 22

Slide 22 text

The Quest of Reducing Redundant Code Generation

Slide 23

Slide 23 text

Embed Types in AST 🤯

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Integration With Ease

Slide 26

Slide 26 text

Collaboration for Support • Apollo Client • Urql • GraphQL Request

Slide 27

Slide 27 text

Generated Code 2020

Slide 28

Slide 28 text

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 ⏩

Slide 29

Slide 29 text

Further Observations…

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

GraphQL Solved Over- Fetching, Right?

Slide 32

Slide 32 text

🙈

Slide 33

Slide 33 text

Describe UI Components With Fragments 🤔

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Laurin

Slide 36

Slide 36 text

Laurin Dotan Saihaj

Slide 37

Slide 37 text

We Just Solved 2 Problems.

Slide 38

Slide 38 text

Fragment & Operation Co-Location

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Laurin

Slide 41

Slide 41 text

Laurin Dotan Saihaj

Slide 42

Slide 42 text

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