Concluding Automatically Generated Types

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, GraphQL Code Generator reads any GraphQL queries in the client application and constructs short hook functions for us to use as an alternative to useQuery.

There are quite a few moving parts, but ultimately it means that the types on the server are used to inform the types of the GraphQL server, which are then in turn used to inform the types of the client. They are all the same types, all the way from server down to the client. Now that we have set up these parts, we won’t need to do much more aside from remembering to run GraphQL Code Generator each time we need to update our types.

Exercise: Utilize the generated code in a React application

Let’s make changes to the code files below to get our application to use the generated types and functions in the generated file.

Note: The file is being type checked every time we click “Run.” The application will only start if the type checking is successful.