BUG - Cannot query by Product Variant

[jbauer1234]

Querying by product variant using storefront api does not work. Please Fix.

During post purchase checkout, I need to retrieve a product variant to offer the user, then pass the variant ID to my sign-changeset api enpoint if the user accepts my post purchase offer. How is this doable if I am unable to query by product variant?

Example:

import {createStorefrontApiClient} from '@shopify/storefront-api-client';



const client = createStorefrontApiClient({
storeDomain: myDomain,
apiVersion: '2024-01',
publicAccessToken: myToken
});

export function App() {


useEffect(() => {
const vId = '43204754669766';

const variantQuery = `
query getVariant($id: ID!) {
productVariant(id: $id) {
id
title
image {
url
}
}
}
`;

try {
const result = await client.request(variantQuery, {
variables: {
id: vId
}
});
if(!result || result.errors) {
(result?.errors && console.error(result.errors))
throw new Error(`Error getting variants: ${vId}`);
}
console.log('variant', result);
}
catch (e) {
console.error(e);
return null;
}
}
}, [])​

It seems productVariant is not in QueryRoot on the storefront api. This should be treated as a bug since product variant ID is required to submit post checkout purchases and there is no other reasonable way to get product variant data using storefront api.

[David-9]

Try this query:

query GetVariantDetails($variantId: ID!) {
  node(id: $variantId) {
    ... on ProductVariant {
      id
      title
      priceV2 {
        amount
        currencyCode
      }
      product {
        id
        title
        description
        images(first: 1) {
          edges {
            node {
              src
            }
          }
        }
      }
    }
  }
}

Where your variables would look like this: 

{
  "variantId": "gid://shopify/ProductVariant/36607671875"
}

This worked for me. Hope this helps!