Move Codegen dependencies to templates

.changeset/five-news-flash.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Avoid throwing error in `h2 dev --codegen` when the Customer Account schema is not found.

.changeset/fresh-zoos-shout.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-codegen': minor
+---
+
+Remove deprecated `schema` export. Use `getSchema('storefront')` instead.

.changeset/wise-rice-hope.md

@@ -0,0 +1,19 @@
+---
+'skeleton': patch
+---
+
+Codegen dependencies must be now listed directly in `package.json`:
+
+```diff
+{
+  "devDependencies": {
++   "@graphql-codegen/cli": "5.0.2",
+    "@remix-run/dev": "^2.8.0",
+    "@remix-run/eslint-config": "^2.8.0",
++   "@shopify/hydrogen-codegen": "^0.3.0",
+    "@shopify/mini-oxygen": "^2.2.5",
+    "@shopify/oxygen-workers-types": "^4.0.0",
+    ...
+  }
+}
+```

packages/cli/package.json

@@ -34,18 +34,15 @@
   },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
-    "@graphql-codegen/cli": "5.0.1",
     "@oclif/core": "3.15.1",
     "@shopify/cli-kit": "3.56.3",
-    "@shopify/hydrogen-codegen": "^0.2.2",
     "@shopify/oxygen-cli": "4.3.6",
     "@shopify/plugin-cloudflare": "3.56.3",
     "ansi-escapes": "^6.2.0",
     "cli-truncate": "^4.0.0",
     "diff": "^5.1.0",
     "fs-extra": "^11.1.0",
     "get-port": "^7.0.0",
-    "graphql-config": "5.0.3",
     "gunzip-maybe": "^1.4.2",
     "prettier": "^2.8.4",
     "semver": "^7.5.3",
@@ -60,17 +57,29 @@
     "@parcel/watcher": "^2.3.0"
   },
   "peerDependencies": {
+    "@graphql-codegen/cli": "^5.0.2",
     "@remix-run/dev": "^2.1.0",
+    "@shopify/hydrogen-codegen": "^0.2.2",
     "@shopify/mini-oxygen": "^2.2.5",
+    "graphql-config": "^5.0.3",
     "vite": "^5.1.0"
   },
   "peerDependenciesMeta": {
+    "@graphql-codegen/cli": {
+      "optional": true
+    },
     "@remix-run/dev": {
       "optional": true
     },
+    "@shopify/hydrogen-codegen": {
+      "optional": true
+    },
     "@shopify/mini-oxygen": {
       "optional": true
     },
+    "graphql-config": {
+      "optional": true
+    },
     "vite": {
       "optional": true
     }

packages/cli/src/lib/codegen.ts

@@ -129,7 +129,12 @@ async function generateTypes({
 }: CodegenOptions) {
   const {generate, loadCodegenConfig, CodegenContext} = await import(
     '@graphql-codegen/cli'
-  );
+  ).catch(() => {
+    throw new AbortError(
+      'Could not load GraphQL Codegen CLI.',
+      'Please make sure you have `@graphql-codegen/cli` installed as a dev dependency.',
+    );
+  });
 
   const {config: codegenConfig} =
     // Load <root>/codegen.ts if available
@@ -181,9 +186,20 @@ async function generateDefaultConfig(
 ): Promise<LoadCodegenConfigResult> {
   const {getSchema, preset, pluckConfig} = await import(
     '@shopify/hydrogen-codegen'
-  );
+  ).catch(() => {
+    throw new AbortError(
+      'Could not load Hydrogen Codegen.',
+      'Please make sure you have `@shopify/hydrogen-codegen` installed as a dev dependency.',
+    );
+  });
+
+  const {loadConfig} = await import('graphql-config').catch(() => {
+    throw new AbortError(
+      'Could not load GraphQL Config.',
+      'Please make sure you have `graphql-config` installed as a dev dependency.',
+    );
+  });
 
-  const {loadConfig} = await import('graphql-config');
   const gqlConfig = await loadConfig({
     rootDir: rootDirectory,
     throwOnEmpty: false,
@@ -197,8 +213,10 @@ async function generateDefaultConfig(
   const defaultGlob = '*!(*.d).{ts,tsx,js,jsx}'; // No d.ts files
   const appDirRelative = relativePath(rootDirectory, appDirectory);
 
-  const caapiSchema = getSchema('customer-account');
-  const caapiProject = findGqlProject(caapiSchema, gqlConfig);
+  const caapiSchema = getSchema('customer-account', {throwIfMissing: false});
+  const caapiProject = caapiSchema
+    ? findGqlProject(caapiSchema, gqlConfig)
+    : undefined;
 
   const customerAccountAPIConfig = caapiProject?.documents
     ? {

packages/hydrogen-codegen/README.md

@@ -1,6 +1,6 @@
 # Hydrogen Codegen
 
-A codegen plugin and preset for generating TypeScript types from GraphQL queries in a `d.ts` file. It does not require any function wrapper and adds no runtime overhead (0 bytes to the bundle).
+A codegen plugin and preset for generating TypeScript types from GraphQL queries in a `d.ts` file. It wraps the [`@shopify/graphql-codegen` package](https://github.com/Shopify/graphql-codegen) and adds utilities for Hydrogen. It does not require any function wrapper and adds no runtime overhead (0 bytes to the bundle).
 
 ```ts
 const {shop} = await client.query(`#graphql
@@ -16,7 +16,7 @@ The GraphQL client must use TypeScript interfaces that are extended in the gener
 
 ## Usage
 
-When using Hydrogen CLI, this package is already included and 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:
+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:
 
 ```ts
 // <root>/codegen.ts
@@ -51,3 +51,5 @@ export default {
   },
 } as CodegenConfig;
 ```
+
+For more examples and information, refer to [@shopify/graphql-codegen](https://github.com/Shopify/graphql-codegen).

packages/hydrogen-codegen/src/index.ts

@@ -1,5 +1,5 @@
 export {preset, type PresetConfig} from './preset.js';
-export {schema, getSchema} from './schema.js';
+export {getSchema} from './schema.js';
 export {
   plugin,
   pluckConfig,

packages/hydrogen-codegen/src/schema.ts

@@ -1,35 +1,34 @@
 // This comment is used during ESM build:
 //! import {createRequire} from 'module'; const require = createRequire(import.meta.url);
 
+type Api = 'storefront' | 'customer-account';
+type Options<T extends boolean> = {throwIfMissing?: T};
+
 /**
  * Resolves a schema path for the provided API type. Only the API types currently
  * bundled in Hydrogen are allowed: "storefront" and "customer".
  * @param api
  * @returns
  */
-export const getSchema = (
-  api = 'storefront' as 'storefront' | 'customer-account',
-) => {
+export function getSchema(api: Api, options?: Options<true>): string;
+export function getSchema(
+  api: Api,
+  options: Options<false>,
+): string | undefined;
+export function getSchema(api: Api, options?: Options<boolean>) {
   if (api !== 'storefront' && api !== 'customer-account') {
     throw new Error(
       `The provided API type "${api}" is unknown. Please use "storefront" or "customer-account".`,
     );
   }
 
-  return require.resolve(`@shopify/hydrogen-react/${api}.schema.json`);
-};
-
-let staticSFAPISchema = '';
-
-try {
-  staticSFAPISchema = getSchema('storefront');
-} catch (error) {
-  // This can happen at build time or when '@shopify/hydrogen-react' is not found.
-  // Generally this shouldn't be an issue in real apps so let's ignore the error.
-  // Also, this package could be used in non-Hydrogen apps.
+  try {
+    return require.resolve(`@shopify/hydrogen-react/${api}.schema.json`);
+  } catch {
+    if (options?.throwIfMissing !== false) {
+      throw new Error(
+        `Could not find a schema for "${api}".\nPlease make sure a recent version of \`@shopify/hydrogen\` is installed.`,
+      );
+    }
+  }
 }
-
-/**
- * The resolved schema path for the Storefront API.
- */
-export const schema = staticSFAPISchema;

packages/hydrogen-codegen/tests/codegen.test.ts

@@ -1,15 +1,15 @@
 import {describe, it, expect} from 'vitest';
 import path from 'node:path';
 import {executeCodegen} from '@graphql-codegen/cli';
-import {preset, schema, pluckConfig} from '../src/index.js';
+import {preset, getSchema, pluckConfig} from '../src/index.js';
 
 describe('Hydrogen Codegen', async () => {
   const getCodegenOptions = (fixture: string, output = 'out.d.ts') => ({
     pluckConfig: pluckConfig as any,
     generates: {
       [output]: {
         preset,
-        schema,
+        schema: getSchema('storefront'),
         documents: path.join(__dirname, `fixtures/${fixture}`),
       },
     },

templates/hello-world/package.json

@@ -5,11 +5,10 @@
   "version": "0.0.0",
   "scripts": {
     "build": "shopify hydrogen build",
-    "dev": "shopify hydrogen dev --codegen",
+    "dev": "shopify hydrogen dev",
     "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
-    "typecheck": "tsc --noEmit",
-    "codegen": "shopify hydrogen codegen"
+    "typecheck": "tsc --noEmit"
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {

templates/skeleton/package.json

@@ -27,8 +27,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.8.0",
     "@remix-run/eslint-config": "^2.8.0",
+    "@shopify/hydrogen-codegen": "^0.2.2",
     "@shopify/mini-oxygen": "^2.2.5",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",