Update React Editor integration and clean up template

services/shopify/client.ts

@@ -1,10 +1,3 @@
-// Storefront API clients, built on `@shopify/hydrogen`.
-//
-// Call sites use the package's own API — `storefront.graphql(DOCUMENT, {
-// variables })` — and pass the result through `unwrapStorefrontResult`, which
-// applies this app's error policy: fail loudly. Hydrogen deliberately does not
-// do that itself, because a 200 carrying partial data and GraphQL errors is a
-// valid response that some callers want to render.
 import {
   createShopifyRequestContext,
   createStorefrontClient,
@@ -16,31 +9,15 @@ import {
   SHOPIFY_STORE_DOMAIN,
 } from '@/services/shopify/config';
 
-// No incoming request and no buyer context: these clients are module-scoped and
-// serve both server rendering and the browser-side hooks, so they must not close
-// over per-request state. `$country`/`$language` are injected from this i18n.
+// Shared clients must not capture per-request buyer state.
 const requestContext = createShopifyRequestContext({
   request: { headers: new Headers() },
   i18n: { country: 'US', language: 'EN' },
 });
 
-/**
- * Workaround for a bug in this preview build of `@shopify/hydrogen`.
- *
- * The client tags every request with `X-Hydrogen-Version`, but the Storefront
- * API does not list that header in its CORS `access-control-allow-headers`.
- * Browsers therefore reject the preflight and `fetch` throws, which hydrogen
- * reports as the generic "SFAPI request failed". It only bites against real
- * stores — `mock.shop` answers `access-control-allow-headers: *`.
- *
- * Stripped in the browser only: server-side requests are not subject to CORS,
- * so they keep sending the header. Remove this once the API allows it (or once
- * these queries move server-side, which is the better long-term fix).
- */
+// Real stores reject this Hydrogen header during browser CORS preflight.
 const CORS_BLOCKED_HEADERS = ['X-Hydrogen-Version'];
 
-// Hydrogen calls `fetch(url, init, cacheOptions)`; Next's caching hints ride
-// along on `init`, which is how the two ways of caching get to coexist.
 const fetchWith = (overrides: RequestInit): typeof globalThis.fetch =>
   ((url, init) => {
     const headers = new Headers(init?.headers);
@@ -58,34 +35,21 @@ const config = {
   publicStorefrontToken: SHOPIFY_PUBLIC_ACCESS_TOKEN,
 };
 
-/**
- * Default client. Uncached, because carts and customer reads must never serve a
- * stale response.
- */
+/** Uncached client for carts and customer data. */
 export const storefront = createStorefrontClient({
   type: 'public',
   requestContext,
   config: { ...config, fetch: fetchWith({ cache: 'no-store' }) },
 });
 
-/**
- * Client for data that changes rarely (shop policies, and anything else safe to
- * serve from Next's data cache for an hour).
- */
+/** One-hour cache for stable storefront data. */
 export const cachedStorefront = createStorefrontClient({
   type: 'public',
   requestContext,
   config: { ...config, fetch: fetchWith({ next: { revalidate: 3600 } }) },
 });
 
-/**
- * Returns the data from a `graphql()` result, throwing if Shopify reported any
- * GraphQL errors. Transport failures — non-200, timeouts, unparseable bodies —
- * have already thrown as `StorefrontApiError` by this point.
- *
- * `operation` names the query in the log and the thrown message, so a failure
- * points at the call site rather than just at "Shopify".
- */
+/** Returns GraphQL data or throws the first Shopify error. */
 export function unwrapStorefrontResult<TData>(
   result: { data: TData | null; errors?: GraphQLFormattedError[] },
   operation: string

services/shopify/config.ts

@@ -1,14 +1,6 @@
-// Storefront configuration, read from the environment in one place.
-//
-// These are all `NEXT_PUBLIC_*`, so Next inlines them at build time and they are
-// safe to read from client components as well as server code.
 export const SHOPIFY_STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN;
 
-/**
- * Public Storefront API access token. Safe to expose to the browser — that is
- * what "public" means here. Omitted for tokenless storefronts such as
- * `mock.shop`. Never put a *private* token behind a `NEXT_PUBLIC_` name.
- */
+// Never assign a private token to this public environment variable.
 export const SHOPIFY_PUBLIC_ACCESS_TOKEN =
   process.env.NEXT_PUBLIC_SHOPIFY_PUBLIC_ACCESS_TOKEN;
 

services/shopify/shop.ts

@@ -1,8 +1,3 @@
-// Server-safe Shopify catalogue access.
-//
-// These are plain async functions with no React imports, so they can be called
-// from Route Handlers (see app/api/chat/route.ts) as well as from the client
-// hooks in hooks/use-shopify-*.ts, which re-export them.
 import type { StorefrontApi } from '@shopify/hydrogen';
 import { storefront, unwrapStorefrontResult } from '@/services/shopify/client';
 import {
@@ -19,8 +14,6 @@ import {
   SEARCH_SUGGESTIONS_QUERY,
 } from '@/graphql/search';
 
-// Optional fields are `| null` rather than just optional: the Storefront API
-// returns explicit nulls, and the typed `gql()` documents now surface that.
 interface ProductImage {
   url: string;
   altText?: string | null;
@@ -67,10 +60,7 @@ export interface ProductOption {
   optionValues?: ProductOptionValue[];
 }
 
-/**
- * Single-variant products still carry one synthetic option — `Title` with the
- * lone value `Default Title`. It isn't a real choice, so keep it out of the UI.
- */
+/** Detects Shopify's synthetic option for single-variant products. */
 export const isDefaultTitleOption = (option: {
   name: string;
   values: string[];
@@ -79,7 +69,6 @@ export const isDefaultTitleOption = (option: {
   option.values.length === 1 &&
   option.values[0] === 'Default Title';
 
-/** Same synthetic option, as it appears on a variant's `selectedOptions`. */
 export const isDefaultTitleSelection = (selection: {
   name: string;
   value: string;
@@ -113,7 +102,6 @@ export interface Product {
 
 interface UseProductsOptions {
   first?: number;
-  /** Cursor from a previous page's `endCursor`; omit for the first page. */
   after?: string | null;
   query?: string;
   sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
@@ -126,14 +114,6 @@ export interface ProductsPage {
   endCursor: string | null;
 }
 
-interface UseProductsReturn {
-  products: Product[];
-  loading: boolean;
-  error: string | null;
-  refetch: () => Promise<void>;
-}
-
-// Fetch multiple products
 export async function getProducts(
   options: UseProductsOptions = {}
 ): Promise<Product[]> {
@@ -141,7 +121,6 @@ export async function getProducts(
   return products;
 }
 
-// Same fetch, but keeps the cursor so callers can page through the catalogue.
 export async function getProductsPage({
   first = 20,
   after = null,
@@ -165,7 +144,6 @@ export async function getProductsPage({
   };
 }
 
-// Fetch a single product by handle
 export async function getProduct(handle: string): Promise<Product | null> {
   const data = unwrapStorefrontResult(
     await storefront.graphql(GET_PRODUCT_QUERY, { variables: { handle } }),
@@ -175,7 +153,6 @@ export async function getProduct(handle: string): Promise<Product | null> {
   return data.product;
 }
 
-// Fetch product recommendations
 export async function getProductRecommendations(productId: string): Promise<Product[]> {
   const data = unwrapStorefrontResult(
     await storefront.graphql(QUERY_PRODUCT_RECOMMENDATIONS, {
@@ -218,7 +195,6 @@ interface UseCollectionProductsOptions {
   after?: string | null;
   sortKey?: CollectionSortKey;
   reverse?: boolean;
-  /** Raw `input` strings from the connection's `filters` facets. */
   filterInputs?: string[];
 }
 
@@ -242,7 +218,6 @@ export interface ProductFilterFacet {
   }>;
 }
 
-// Fetch all collections
 export async function getCollections(first = 50): Promise<Collection[]> {
   const data = unwrapStorefrontResult(
     await storefront.graphql(GET_COLLECTIONS_QUERY, { variables: { first } }),
@@ -252,7 +227,6 @@ export async function getCollections(first = 50): Promise<Collection[]> {
   return data.collections.edges.map((edge) => edge.node);
 }
 
-// Fetch products in a collection by handle
 export async function getCollectionProducts(
   handle: string,
   options: UseCollectionProductsOptions = {}
@@ -263,7 +237,6 @@ export async function getCollectionProducts(
   return { ...page.collection, products: page.products };
 }
 
-// Same fetch, but keeps the cursor and facet list for filtering and paging.
 export async function getCollectionProductsPage(
   handle: string,
   {
@@ -319,7 +292,6 @@ export interface SearchFilterValue {
   id: string;
   label: string;
   count: number;
-  /** JSON string accepted back as a `ProductFilter` input. */
   input: string;
 }
 
@@ -360,18 +332,14 @@ interface SearchProductsOptions {
   after?: string | null;
   sortKey?: SearchSortKey;
   reverse?: boolean;
-  /** Raw `input` strings from the facets, parsed back into filter objects. */
   filterInputs?: string[];
 }
 
-// The `ProductFilter` input shape, taken from the query that consumes it so it
-// tracks the schema rather than being restated here.
 type ProductFilterInput = NonNullable<
   StorefrontApi.VariablesOf<typeof GET_COLLECTION_PRODUCTS_QUERY>['filters']
 >[number];
 
-// Facet `input` values are opaque JSON strings produced by Shopify and handed
-// straight back as filter inputs, so they are parsed, not constructed.
+// Shopify facet inputs are opaque JSON values intended for round-tripping.
 function parseFilterInputs(inputs: string[]): ProductFilterInput[] {
   return inputs.flatMap((input) => {
     try {