Generate and export unstable-storefront-api-types and schema with codegen support

packages/hydrogen-codegen/src/defaults.ts

@@ -42,6 +42,17 @@ const sfapiDefaultValues: DefaultValues = {
     ),
 };
 
+const unstableSfapiDefaultValues: DefaultValues = {
+  importTypesFrom: '@shopify/hydrogen/unstable-storefront-api-types',
+  namespacedImportName: 'UnstableStorefrontAPI',
+  interfaceExtensionCode: ({queryType, mutationType}) =>
+    replacePlaceholders(
+      sfapiDefaultInterfaceExtensionCode,
+      queryType,
+      mutationType,
+    ),
+};
+
 const caapiDefaultValues: DefaultValues = {
   importTypesFrom: '@shopify/hydrogen/customer-account-api-types',
   namespacedImportName: 'CustomerAccountAPI',
@@ -56,5 +67,7 @@ const caapiDefaultValues: DefaultValues = {
 export function getDefaultOptions(outputFile = '') {
   return /^(customer|caapi\.)/i.test(outputFile)
     ? caapiDefaultValues
+    : /^(unstable)/i.test(outputFile)
+    ? unstableSfapiDefaultValues
     : sfapiDefaultValues;
 }

packages/hydrogen-codegen/src/schema.ts

@@ -1,7 +1,7 @@
 // This comment is used during ESM build:
 //! import {createRequire} from 'module'; const require = createRequire(import.meta.url);
 
-type Api = 'storefront' | 'customer-account';
+type Api = 'storefront' | 'unstable-storefront' | 'customer-account';
 type Options<T extends boolean> = {throwIfMissing?: T};
 
 /**
@@ -16,9 +16,13 @@ export function getSchema(
   options: Options<false>,
 ): string | undefined;
 export function getSchema(api: Api, options?: Options<boolean>) {
-  if (api !== 'storefront' && api !== 'customer-account') {
+  if (
+    api !== 'storefront' &&
+    api !== 'customer-account' &&
+    api !== 'unstable-storefront'
+  ) {
     throw new Error(
-      `The provided API type "${api}" is unknown. Please use "storefront" or "customer-account".`,
+      `The provided API type "${api}" is unknown. Please use "storefront", "unstable-storefront" or "customer-account".`,
     );
   }
 

packages/hydrogen-react/codegen.ts

@@ -4,8 +4,9 @@ import {
   customerAccountApiCustomScalars,
 } from './src/codegen.helpers';
 
-const SF_API_VERSION = '2024-07';
-const CA_API_VERSION = '2024-07';
+const SF_API_VERSION = '2024-04';
+const CA_API_VERSION = '2024-04';
+const SF_UNSTABLE_API_VERSION = 'unstable';
 
 const storefrontAPISchema: CodegenConfig['schema'] = {
   [`https://hydrogen-preview.myshopify.com/api/${SF_API_VERSION}/graphql.json`]:
@@ -17,6 +18,16 @@ const storefrontAPISchema: CodegenConfig['schema'] = {
     },
 };
 
+const storefrontAPIUnstableSchema: CodegenConfig['schema'] = {
+  [`https://hydrogen-preview.myshopify.com/api/${SF_UNSTABLE_API_VERSION}/graphql.json`]:
+    {
+      headers: {
+        'X-Shopify-Storefront-Access-Token': '3b580e70970c4528da70c98e097c2fa0',
+        'content-type': 'application/json',
+      },
+    },
+};
+
 // API Key used is specific for Hydrogen App
 const customerAccountAPISchema: CodegenConfig['schema'] = {
   [`https://app.myshopify.com/services/graphql/introspection/customer?api_client_api_key=159a99b8a7289a72f68603f2f4de40ac&api_version=${CA_API_VERSION}`]:
@@ -66,6 +77,44 @@ const config: CodegenConfig = {
         },
       ],
     },
+    'src/unstable-storefront-api-types.d.ts': {
+      schema: storefrontAPIUnstableSchema,
+      plugins: [
+        {
+          add: {
+            content: `
+              /**
+               * THIS FILE IS AUTO-GENERATED, DO NOT EDIT
+               * Based on Storefront API ${SF_UNSTABLE_API_VERSION}
+               * If changes need to happen to the types defined in this file, then generally the Storefront API needs to update. After it's updated, you can run \`npm run graphql-types\`.
+               * Except custom Scalars, which are defined in the \`codegen.ts\` file
+               */
+              /* eslint-disable */`,
+          },
+        },
+        {
+          typescript: {
+            useTypeImports: true,
+            // If a default type for a scalar isn't set, then instead of 'any' we set to 'unknown' for better type safety.
+            defaultScalarType: 'unknown',
+            useImplementingTypes: true,
+            enumsAsTypes: true,
+            // Define how the Storefront API's custom scalars map to TypeScript types
+            scalars: storefrontApiCustomScalars,
+          },
+        },
+      ],
+    },
+    './unstable-storefront.schema.json': {
+      schema: storefrontAPIUnstableSchema,
+      plugins: [
+        {
+          introspection: {
+            minify: true,
+          },
+        },
+      ],
+    },
     'src/customer-account-api-types.d.ts': {
       schema: customerAccountAPISchema,
       plugins: [

packages/hydrogen-react/package.json

@@ -14,6 +14,7 @@
   "files": [
     "dist",
     "storefront.schema.json",
+    "unstable-storefront.schema.json",
     "customer-account.schema.json"
   ],
   "type": "commonjs",
@@ -50,7 +51,9 @@
       "default": "./dist/browser-prod/index.mjs"
     },
     "./storefront-api-types": "./dist/types/storefront-api-types.d.ts",
+    "./unstable-storefront-api-types": "./dist/types/unstable-storefront-api-types.d.ts",
     "./storefront.schema.json": "./storefront.schema.json",
+    "./unstable-storefront.schema.json": "./unstable-storefront.schema.json",
     "./customer-account.schema.json": "./customer-account.schema.json",
     "./customer-account-api-types": "./dist/types/customer-account-api-types.d.ts",
     "./package.json": "./package.json",
@@ -90,6 +93,12 @@
     "*": {
       "storefront-api-types": [
         "./dist/types/storefront-api-types.d.ts"
+      ],
+      "unstable-storefront-api-types": [
+        "./dist/types/unstable-storefront-api-types.d.ts"
+      ],
+      "customer-account-api-types": [
+        "./dist/types/customer-account-api-types.d.ts"
       ]
     }
   },
@@ -119,7 +128,7 @@
     "build:vite:umdprod": "vite build --mode umdbuild",
     "build:tsc:cjs": "cpy ./dist/types/index.d.ts ./dist/types/ --rename='index.d.cts' --flat",
     "build:tsc:es": "tsc --emitDeclarationOnly --project tsconfig.typeoutput.json",
-    "copy-storefront-types": "cpy ./src/storefront-api-types.d.ts ./dist/types/ --flat",
+    "copy-storefront-types": "cpy ./src/storefront-api-types.d.ts ./dist/types/ --flat && cpy ./src/unstable-storefront-api-types.d.ts ./dist/types/ --flat && cpy ./src/customer-account-api-types.d.ts ./dist/types/ --flat",
     "format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
     "graphql-types": "graphql-codegen --config codegen.ts && npm run format",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx src",

packages/hydrogen/package.json

@@ -45,6 +45,8 @@
     },
     "./storefront-api-types": "./dist/storefront-api-types.d.ts",
     "./storefront.schema.json": "./dist/storefront.schema.json",
+    "./unstable-storefront-api-types": "./dist/unstable-storefront-api-types.d.ts",
+    "./unstable-storefront.schema.json": "./dist/unstable-storefront.schema.json",
     "./customer-account-api-types": "./dist/customer-account-api-types.d.ts",
     "./customer-account.schema.json": "./dist/customer-account.schema.json",
     "./package.json": "./package.json"
@@ -54,6 +56,9 @@
       "storefront-api-types": [
         "./dist/storefront-api-types.d.ts"
       ],
+      "unstable-storefront-api-types": [
+        "./dist/unstable-storefront-api-types.d.ts"
+      ],
       "customer-account-api-types": [
         "./dist/customer-account-api-types.d.ts"
       ]

packages/hydrogen/tsup.config.ts

@@ -49,6 +49,24 @@ export default defineConfig([
         '\n',
       );
 
+      const unstableSchemaFile = 'unstable-storefront.schema.json';
+      const unstableTypeFile = 'unstable-storefront-api-types.d.ts';
+
+      await fs.copyFile(
+        path.resolve(hydrogenReact, unstableSchemaFile),
+        path.resolve(outDir, unstableSchemaFile),
+      );
+      await fs.copyFile(
+        path.resolve(hydrogenReact, 'src', unstableTypeFile),
+        path.resolve(outDir, unstableTypeFile),
+      );
+
+      console.log(
+        '\n',
+        'Unstable storefront API types copied from hydrogen-react',
+        '\n',
+      );
+
       const caSchemaFile = 'customer-account.schema.json';
       const caTypeFile = 'customer-account-api-types.d.ts';