quantityAvailable property returning null

I’m trying to create a checkout UI extension for our store that will add free gifts to the order at checkout. I’m currently using the “availableForSale” product variant property with no issues, but would like to update it to use the quantityAvailable so that if there is SOME quantity left but not enough, it won’t break the checkout. Like if there is 1 free gift left but the order is supposed to receive 2, it won’t try adding 2 because there is only 1 left.

I have added “unauthenticated_read_product_inventory” access scope to the extension and still quantityAvailable is returning null. I’ve also tried directly in the graphiql app on our store & get the same response with an error message that I need “unauthenticated_read_product_inventory” access scope. Our GraphiQL app has every access scope turned on so not sure why I am still receiving this error message.

I have scoured the forums over the last day and have seen similar questions with no solution.

Doc:
https://shopify.dev/docs/api/storefront/2024-01/objects/productvariant

query:

const { data } = await query(
        `query ($id: ID!) {
          product: node(id: $id) {
            ... on Product {
              id
              title
              metafield(namespace: "custom", key: "edge_technology") {
                value
              }
              variants(first: 10) {
                edges {
                  node {
                    id
                    title
                    availableForSale
                    quantityAvailable
                  }
                }
              
              }
            }
          }
        }`,
        {
          variables: { id: productId },
        }

GraphiQL app response for a query including quantityAvailable: