@shopify/hydrogen-codegen

Hydrogen Codegen

A codegen plugin and preset for generating TypeScript types from GraphQL queries in a d.ts file. It wraps the @shopify/graphql-codegen package and adds utilities for Hydrogen. It does not require any function wrapper and adds no runtime overhead (0 bytes to the bundle).

const {shop} = await client.query(`#graphql
  query {
    shop {
     name
    }
  }
`);

The GraphQL client must use TypeScript interfaces that are extended in the generated d.ts file. See an example in Hydrogen's Storefront client.

Usage

When using Hydrogen CLI, this package is already configured for you to generate types for the Shopify Storefront API. However, if you want to use it standalone with the GraphQL CLI or just want to add other APIs to Hydrogen, you can use the following example configuration:

// <root>/codegen.ts

import type {CodegenConfig} from '@graphql-codegen/cli';
import {pluckConfig, preset, getSchema} from '@shopify/hydrogen-codegen';

export default {
  overwrite: true,
  pluckConfig,
  generates: {
    'storefrontapi.generated.d.ts': {
      preset,
      schema: getSchema('storefront'),
      documents: [
        './*.{ts,tsx,js,jsx}',
        './app/**/*.{ts,tsx,js,jsx}',
        '!./app/graphql/customer-account/*.{ts,tsx,js,jsx}',
        '!./app/graphql/my-cms/*.{ts,tsx,js,jsx}',
      ],
    },
    'customeraccountapi.generated.d.ts': {
      preset,
      schema: getSchema('customer-account'),
      documents: ['./app/graphql/customer-account/*.{ts,tsx,js,jsx}'],
    },
    'mycms.generated.d.ts': {
      preset,
      schema: './my-cms.json',
      documents: ['./app/graphql/my-cms/*.{ts,tsx,js,jsx}'],
    },
  },
} as CodegenConfig;

For more examples and information, refer to @shopify/graphql-codegen.