Introducing Codegen for Hydrogen: Automated Types for Storefront API Queries

As developers, we're always seeking ways to enhance our workflow and minimize errors in our applications. This explains TypeScript's explosion in popularity, offering benefits such as type checking and tooling.

But for all of TypeScript's benefits, it's not without some pain points. Integrating TypeScript when consuming APIs can be repetitive when it comes to maintaining type definitions. That’s where pre-generated types and codegen can be leveraged to reduce the manual work of keeping API types in sync with queries.

In this article, we'll explore how to manually incorporate types with the Storefront API, look at a pre-generated approach and then dive into how the new GraphQL Codegen feature in Hydrogen changes the game.

A primer on TypeScript

TypeScript is a superset of JavaScript that brings type checking and other advanced features to the language.

It’s become increasingly popular among developers due to its ability to catch errors early, ensure data consistency, and provide a better development experience through features like autocompletion. Many Shopify developers generate their apps and Hydrogen projects in TypeScript flavors to take advantage of these robust features.

GraphQL API Example

When working with a GraphQL API, defining accurate types ensures a smooth development experience and minimizes runtime errors. Here's an example of defining types when fetching data from the Storefront API:

In the example above, I've defined aProducttype and passed it along to the query function. The static typing provided by TypeScript helps ensure my code is consistent and predictable, and provides handy tools like autocomplete. When interacting with theproductobject, my IDE now knows there are three possible properties I could be working with:

The product object has three available properties
Autocomplete improving the developer experience.

It also lets me know when I mess up by highlighting when a property I'm trying to use doesn't exist:

Flags when property does not exist
打印稿胭脂property.

However, the process of manually maintaining these types in sync with our GraphQL queries can be time-consuming and error-prone. Want to fetch an additional field? Don't forget to find and update the types!

Pre-generated types

The above process can be streamlined by using pre-generated types - for the Storefront API, there's thestorefront-api-typesutility. With a simple import, all of the Storefront API types are available for use:

import type { Product } from '@shopify/hydrogen/storefront-api-types'; const product = await storefront.query
           (FEATURED_PRODUCT_QUERY);

It's refreshing not having to manually construct the types, but while super convenient, it can feel like overkill having every field defined - autocomplete gives me fields I’m not even querying for:

Autocomplete shows all fields
A verbose autocomplete.

GraphQL Codegen: Automatically Generated TypeScript Types

EnterGraphQL Codegen: a tool that automatically generates types based on your queries like magic! This means you no longer have to manually keep types in sync, or rely on superfluous type definitions.

It's available to use in Hydrogen today with the--codegen-unstableflag.

npm run dev -- --codegen-unstable


Codegen automatically generates types for all of the queries in my project and stores them in astorefrontapi.generated.d.tsfile. The Storefront client (provided by Hydrogen) automatically reads these types and with that, they're available without any setup.

Available types appear with autocomplete
No types in sight!

The power of components

But the real power of Codegen is when you link the types to a component. Here I’m importing the generated type - it’s calledFeatureProductQuerybecause my query is calledfeaturedProduct(every time you create a query, codegen will create a type of the same name).

Now if I try to render the collection description (not part of the query), TypeScript alerts me that the property doesn’t exist.

Typescript alerts when a property is missing
TypeScript asserting the description property is missing - i.e. it’s not part of our query!

All I need to do is add description to the query - the types are updated and we’re in business!

Codegen tips

  • Be sure to name your operations, and keep those names unique. Codegen will use the operation name to generate a type of the same name.
  • You can configure the generator by creatinga codegen.ts filein the root of your project.
  • If you're using embedded expressions to include variables in a query, cast the queryas const. This prevents TypeScript from inferring a generic "string" type for the query.
Before and after as const
Before and after as const.

Conclusion

While TypeScript provides numerous benefits, maintaining types while working with GraphQL APIs can introduce friction. GraphQL Codegen overcomes these challenges by ensuring your types are automatically generated based on your schema, resulting in a more efficient and enjoyable development process.

I hope you lean on the power of GraphQL Codegen to speed up your development workflow!

Get started with a Hydrogen project today.

Topics:

Grow your business with the Shopify Partner Program

Learn more