Generating the types

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.

Thumbnail for the \newline course Fullstack React with TypeScript Masterclass

  • [00:00 - 00:09] Generating TypeScript types. We can now generate TypeScript types from the downloaded schema. Apollo provides a special CLI utility to get TypeScript types from a GraphQL schema.

    [00:10 - 00:12] Run it like this. Yarnrun Apollo, CodeGen.

    [00:13 - 00:19] Generate. We specify the local schema file. It will be a GraphQL schema JSON. Target should be TypeScript.

    [00:20 - 00:25] Tag name, GQL. It will extract the tag names from the code. Add the addTypeName parameter.

    [00:26 - 00:34] And global types file should be in SRC types, GraphQL global types TS. And then add the types folder as a destination.

    [00:35 - 00:39] Run it in the terminal. After it's done, you should see these green check marks.

    [00:40 - 00:44] It means that everything is fine. And also you should see the types folder with generated types.

    [00:45 - 00:55] This file has the linters disabled and explicitly states that it is generated automatically and should not be edited. If you look at the contents, you'll see that it expert the types for your query .

    [00:56 - 01:08] From now on, every time we write a new GraphQL query on mutation, we'll use this code generator to get the types for those queries. Now let's update our code to use the automatically generated types instead of our custom types.

    [01:09 - 01:14] Remove the user info type. And instead, import the getUserInfo from types getUserInfo.

    [01:15 - 01:17] Pass it as a type to use query. And we're done.