Search⌘ K

Concluding Automatically Generated Types

Understand how to leverage the GraphQL Code Generator to automatically produce TypeScript types and short hooks in a React app. Learn to keep client and server schemas synchronized, improve type safety, and integrate generated code effectively into your React components.

What we learned

To recap what we’ve discussed:

  1. The GraphQL server’s schema tells us the shape of our data.

  2. When we run GraphQL Code Generator, we direct it to generate a new src/generated/graphql.tsx file in our client application.

  3. GraphQL Code Generator reads all the GraphQL type definitions from the server and builds up a list of TypeScript types that correspond with the GraphQL types.

  4. Then, ...