Generating the types
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.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[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.