Apollo Codegen In React - Generate Typescript Types from GraphQL Schema and Queries

This tutorial explains how to automate the generation of TypeScript types from a GraphQL schema and queries using Apollo Codegen in a React app.

Graphql codegen / Apollo codegen is a great feature! When working with GraphQL and Typescript in React, we want to be able to have typescript autocompletion on the variables we pass to our queries and mutations as well as on the data that is being returned from them. You can do it manually by inserting a type or an interface as a generic inside your useQuery() or useMutation() hook. However, this process is extremely error-prone and is not DRY. In this tutorial, we are going to see how to automate the generation of typescript types from the GraphQL schema. Github link: github.com/vladwulf/apollo-codegen-tutorial 00:00 Introduction 05:00 Generate typescript from GraphQL 08:00 Inject Query Data Generic 10:30 Inject Query Variables Generic