Headless Shopify Development with Hydrogen & Remix

Hydrogen 2.0 Remix Loader Query

// Shopify Hydrogen 2.0 Remix Route Loader Function
import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';

export async function loader({ context, params }: LoaderFunctionArgs) {
  const { handle } = params;
  const { product } = await context.storefront.query(PRODUCT_QUERY, {
    variables: { handle },
  });

  if (!product) throw new Response('Not Found', { status: 404 });
  return json({ product });
}