BUG - Unable to get product variants usng Storefront Api

Retired Boards Appdev Merchandising

Topic summary

A developer is unable to query product variants using Shopify’s Storefront API, which is blocking their post-purchase checkout flow.

The Issue:

  • Need to retrieve product variant data during post-purchase checkout
  • Must pass variant ID to a sign-changeset API endpoint when users accept offers
  • Current Storefront API queries for product variants are failing

Technical Context:

  • Using @shopify/storefront-api-client package
  • API version: 2024-01
  • Attempting to query productVariant(id: $id) with GraphQL

Code Problem:
The provided JavaScript/React code example appears corrupted or improperly formatted, making it difficult to identify the exact implementation error. The code shows attempts to use useEffect, async/await patterns, and error handling, but the syntax is garbled.

Status: Unresolved - awaiting response on whether this is a platform bug or implementation issue.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

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 = myVariantId;

          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;
          }
     }
}, [])​