Checkout UI extension `query` and GraphiQL apparently returning different results

Retired Boards Appdev Graphql Basics And Troubleshooting
,
1

I’m writing my first Checkout UI Extension and am also fairly new to GraphQL so it’s possible I’m missing something here.

When running a product query using the query API helper in my extension, I get a response that contains a priceV2 field, which is not part of the latest API schema. My extension is configured to use the 2024-10 Storefront API version in shopify.extension.toml, and I can verify that that version is being queried in the Network tab of the Web Inspector. When I run the same query against the same API version using GraphiQL (same store and extension context), I get an error that the priceV2 field doesn’t exist. Changing the query to return price solves it.

My extension query is as follows:

const productData = await query<{ node: ComplementaryProductData }>(
    `{
        node(id: "${productID}") {
            ... on Product {
                title
                featuredImage {
                    altText
                    id
                    originalSrc
                }
                variants(first: 1){
                    edges {
                        node {
                            id
                            title
                            priceV2 {
                                amount
                                currencyCode
                            }
                            image {
                                originalSrc
                                altText
                            }
                        }
                    }
                }
            }
        }
    }`,
);

This correctly returns data, though the query seemingly doesn’t match the API schema.

My GraphiQL query is as follows:

query Product($id: ID!) {
  node(id: $id) {
    ... on Product {
      title
      featuredImage {
        altText
        id
        originalSrc
      }
      variants(first: 1) {
        edges {
          node {
            id
            title
            priceV2 {
                amount
                currencyCode
            }
            image {
              originalSrc
              altText
            }
          }
        }
      }
    }
  }
}

This returns an error:

{
  "errors": [
    {
      "message": "Field 'priceV2' doesn't exist on type 'ProductVariant'",
      "locations": [
        {
          "line": 15,
          "column": 13
        }
      ],
      "path": [
        "query Product",
        "node",
        "... on Product",
        "variants",
        "edges",
        "node",
        "priceV2"
      ],
      "extensions": {
        "code": "undefinedField",
        "typeName": "ProductVariant",
        "fieldName": "priceV2"
      }
    }
  ]
}

Am I missing something obvious here? Is it expected that GraphiQL will show a different behaviour to my extension? Or am I mis-specifying the API version in some way? Any light anyone might be able to shed on this would be much appreciated. Thanks.

2

Shopify has been gradually moving away from the priceV2 field to a more unified price field, but the extension environment might still support legacy fields like priceV2. If priceV2 is deprecated, it could be available in the extension environment for backward compatibility but no longer exposed in the latest GraphiQL schema.

Use the price field moving forward and check the API version and check for any differences between your extension environment and GraphiQL