Storefront API: Variants Query Fails When Product Has Multiple Options

Technical Q&A
, ,
1

Hi, I’m building a headless Shopify storefront using the Storefront API and ran into an issue.

When my product has only one option (like Size), the variants query works fine. But when I add multiple options (like Color + Size), the query fails or returns incomplete data.

Here is the GraphQL snippet I’m using:

export const getProductQuery = /* GraphQL */ query getProduct($handle: String!) { product(handle: $handle) { ...product } } ${signleProductFragment};

export const signleProductFragment = /* GraphQl */ `
fragment product on Product {
id
handle
availableForSale
title
description
descriptionHtml
priceRange {
maxVariantPrice {
amount
currencyCode
}
minVariantPrice {
amount
currencyCode
}
}

featuredImage {
…image
}
variants(first: 15) {
edges {
node {
id
title
sku
availableForSale
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
selectedOptions {
name
value
}
image {
url
altText
}
}
}
}
images(first: 1) {
edges {
node {
…image
}
}
}

seo {
…seo
}
tags
updatedAt
}
${imageFragment}
${seoFragment}
`;

The same query works on single-option products but causes issues on multi-option products.

Am I missing something in the setup or schema? Any suggestions would be appreciated!

Thanks!