Headless E-Commerce: Decoupling Shopify Storefronts with Next.js & Stripe

const SHOPIFY_GRAPHQL_ENDPOINT = `https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2026-07/graphql.json`;

export async function shopifyFetch<T>({
  query,
  variables = {},
  tags = []
}: {
  query: string;
  variables?: Record<string, any>;
  tags?: string[];
}): Promise<T> {
  const res = await fetch(SHOPIFY_GRAPHQL_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_TOKEN!,
    },
    body: JSON.stringify({ query, variables }),
    next: { tags, revalidate: 3600 } // Edge cached with tag invalidation
  });

  const json = await res.json();
  if (json.errors) {
    throw new Error(`Shopify GraphQL Error: ${JSON.stringify(json.errors)}`);
  }
  return json.data as T;
}