Template
Rami BitarandClaude Opus 5
f8c3ef9e0e
Replaces the hand-rolled shopifyFetch wrapper and raw query strings with
the hydrogen preview package (0.0.0-preview-116d5d7-20260730141607), the
same build pinned in hydrogen-preview/.
- services/shopify/client: createStorefrontClient({type: "public"}) with a
static request context. Two module-scoped clients — uncached for carts,
products and customers; revalidate-3600 for shop policies — using the
client's custom fetch option to carry Next's caching hints.
- graphql/*: every document wrapped in gql(), fragments composed via the
second argument instead of string interpolation, and $country/$language
declared with @inContext so hydrogen injects them.
- shopifyFetch keeps its {query, variables} call shape so call sites are
unchanged, but is now generic over the document, so data is inferred. It
re-raises GraphQL errors, which hydrogen returns rather than throws.
Env var names, the 2025-07 API version pin, and the client-side fetching
architecture are unchanged.
Turning on type coverage surfaced real defects, not just annotations:
- hydrogen gql check caught $discountCodes: [String!] used where the field
requires [String!]!.
- Cart and customer mutation payloads are nullable and were dereferenced
unconditionally, so a failed mutation threw a TypeError. Adds a shared
unwrapCartPayload helper (collapsing five copies of the same userErrors
check) and explicit null handling in the customer service, so a null
payload reads as an error rather than success with no errors.
- Search results are a Product | Page | Article union; adds __typename to
the queries and narrows on it.
- Widens nullable fields (altText, image, customer.email, totalTaxAmount)
in the domain interfaces and in the structural duplicates some
components declare locally.
Adds a typecheck script (tsc --noEmit && hydrogen gql check); it passes
with 0 errors. Two deprecation warnings are left alone as acting on them
would change behaviour: ProductOption.values and CartCost.totalTaxAmount.
Verified against mock.shop: build prerenders the policy pages through the
cached client, and in the browser the product grid, search with facets,
collection filter round-trip, add-to-cart and quantity update all work.
Customer account flows are untested — they need real credentials.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JaxgqPbFxLsSuLPZom2kdC
117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { truncate } from '@/lib/utils';
|
|
|
|
interface ProductImage {
|
|
url: string;
|
|
altText?: string | null;
|
|
}
|
|
|
|
interface ProductPrice {
|
|
amount: string;
|
|
currencyCode: string;
|
|
}
|
|
|
|
interface ProductVariant {
|
|
id: string;
|
|
title: string;
|
|
price: ProductPrice;
|
|
availableForSale: boolean;
|
|
}
|
|
|
|
interface Product {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
handle: string;
|
|
images: {
|
|
edges: Array<{
|
|
node: ProductImage;
|
|
}>;
|
|
};
|
|
priceRange: {
|
|
minVariantPrice: ProductPrice;
|
|
};
|
|
compareAtPriceRange?: {
|
|
minVariantPrice: ProductPrice;
|
|
};
|
|
variants: {
|
|
edges: Array<{
|
|
node: ProductVariant;
|
|
}>;
|
|
};
|
|
}
|
|
|
|
interface ProductCardProps {
|
|
product: Product;
|
|
}
|
|
|
|
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
|
|
const firstImage = product.images.edges[0]?.node;
|
|
const price = product.priceRange.minVariantPrice;
|
|
const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
|
|
const hasDiscount =
|
|
compareAtPrice &&
|
|
parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
|
|
const firstVariant = product.variants.edges[0]?.node;
|
|
const isAvailable = firstVariant?.availableForSale || false;
|
|
|
|
const formatPrice = (amount: string) => {
|
|
return `$${parseFloat(amount).toFixed(2)}`;
|
|
};
|
|
|
|
return (
|
|
<Link
|
|
href={`/products/${product.handle}`}
|
|
className="group block h-full"
|
|
>
|
|
{/* Product Image */}
|
|
<div className="relative aspect-square overflow-hidden">
|
|
{firstImage ? (
|
|
<img
|
|
src={firstImage.url}
|
|
alt={firstImage.altText || product.title}
|
|
className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-[1.04]"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-zinc-300">
|
|
<i className="ri-image-line text-8xl"></i>
|
|
</div>
|
|
)}
|
|
|
|
{hasDiscount && compareAtPrice && (
|
|
<span className="absolute top-3 left-3 text-[11px] font-mono tracking-widest text-rose-600">
|
|
SALE
|
|
</span>
|
|
)}
|
|
|
|
{!isAvailable && (
|
|
<span className="absolute top-3 right-3 text-[11px] font-mono tracking-widest text-muted-foreground">
|
|
SOLD OUT
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Product Info */}
|
|
<div className="flex flex-col flex-1 py-2.5">
|
|
<h3 className="text-sm font-medium text-foreground line-clamp-1">
|
|
{truncate(product.title, 65)}
|
|
</h3>
|
|
|
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
|
<span className="font-mono tabular-nums tracking-tight text-sm text-foreground">
|
|
{formatPrice(price.amount)}
|
|
</span>
|
|
{hasDiscount && compareAtPrice && (
|
|
<span className="font-mono tabular-nums tracking-tight text-sm line-through text-muted-foreground">
|
|
{formatPrice(compareAtPrice.amount)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default ProductCard;
|