GraphQL Typescript Generators

GraphQL TypeScript generators work by analyzing the GraphQL schema and generating TypeScript types based on the schema. The generators use the GraphQL schema to infer the types of fields and arguments in the queries and mutations. Once the types are inferred, the generators create TypeScript types that can then be used in client-side code.

The generators typically use templates to generate the TypeScript code, which allows developers to customize the generated code to match their specific use case. The templates can be written in a variety of languages, including TypeScript, JavaScript, and even GraphQL SDL.

There are several benefits of using GraphQL TypeScript generators. Let’s take a look at the most prominent ones.

Improved Productivity
By automating the generation of TypeScript types, developers can save a significant amount of time and effort during development. This allows developers to focus on building the core features of their application rather than worrying about the type safety of their code.

Improved Type Safety
Using TypeScript with GraphQL can significantly improve the type safety of an application. By generating TypeScript types from the GraphQL schema, developers can ensure that the data they are accessing from the server is correctly typed and errors are caught during development.

Reduced Errors
Using TypeScript with GraphQL can help catch errors early in the development process. This can reduce the number of bugs that make it to production, improving the overall quality of the code.

Simplified Maintenance
As the application evolves, the GraphQL schema may change. By using a GraphQL TypeScript generator, developers can easily update the TypeScript types to reflect the changes in the schema. This can help simplify maintenance and reduce the risk of errors.

Before we start, please ensure that you have the following prerequisites installed:

• Node.js
• Npm or yarn

First, we need to create a new project and install the required packages. To create a new project, open your terminal and type the following command:

mkdir crystallize-api && cd crystallize-api

Next, we need to initialize our project with npm or yarn. For this tutorial, we will be using npm but feel free to use whatever you prefer.

npm init -y

Once we have initialized our project, we need to install the following packages:

npm install graphql graphql-codegen graphql-request @graphql-codegen/cli

• graphql: the official GraphQL library for JavaScript.
• graphql-codegen: tool that generates TypeScript types from a GraphQL schema.
• graphql-request: library for making GraphQL requests.
• @graphql-codegen/cli: command-line interface for graphql-codegen.

Next, we need to set up our GraphQL endpoint. For this tutorial, we will be using Crystallize's Catalogue API. The endpoint for the API is:

<https://api.crystallize.com/{your-tenant-name}/catalogue>

Please make sure to add your tenant identifier there.

Next, we need to configure graphql-codegen to generate types for our Catalogue API. Create a new file called codegen.yml in your project's root directory and add the following code:

overwrite: true
schema: <https://api.crystallize.com/frntr/catalogue>
documents: ./src/**/*.graphql
generates: { "./src/gql/": { preset: "client" } }

This configuration file tells graphql-codegen to generate TypeScript types for the Catalogue API and output the generated code to the ./src/gql folder.

Now that we have our configuration file setup, it’s time to add a GraphQL query so we can generate types for it. The example query we are using for this tutorial is a simple hello-world query:

query HelloCrystallize{
  catalogue(language: "en", path: "/shop") {
    name
    children {
      name
      path
    }
  }
}

Finally, it is now time to generate the types! To make it easier, let’s add a script to our package.json file:

"generate": "graphql-codegen --config codegen.yml"

Now that we have configured graphql-codegen, we can generate the TypeScript types by running the following command in the terminal:

npm run generate

This command tells graphql-codegen to read the configuration from the codegen.yml file and generate TypeScript types for the Catalogue API. Once graphql-codegen has finished generating the TypeScript types, you should see newly generated files in the **src/gql** folder.