GraphQL meta-fields

[BeardedCoder]

I have a product page that currently outputs all the information but i want to add metafields to the query.

This is my query:

query {
  shop {
    productByHandle(handle:"adidas-kids-stan-smith") {
      title
      id
      description
      metafields (first:100, namespace: "details") {
        edges {
          node {
            key
            value
          }
        }
      }
      tags
      options {
        id
        name
        values
      }
      variants(first:100) {
        edges {
          node {
            id
            title
            priceV2 {
              amount
            }
            compareAtPriceV2 {
              amount
            }
            availableForSale
            selectedOptions {
              name
              value
            }
            image {
              altText
              thumbnailImg: transformedSrc(maxWidth:100, maxHeight: 120, crop: CENTER)
              productImg: transformedSrc(maxWidth:800, maxHeight:960, crop:CENTER)
            }
          }
        }
      }
      images(first:50) {
        edges {
          node {
            altText
            thumbnailImg: transformedSrc(maxWidth:100, maxHeight: 120, crop: CENTER)
              productImg: transformedSrc(maxWidth:800, maxHeight:960, crop:CENTER)
          }
        }
      }
    }
  }
}

I'm looking to get the metafields which has this format:

product.metafields.details.short_description

When I view it in Graphiql it returns:

"metafields": {
          "edges": []
        },

Do I have to expose the metafields to the storefront API? If so how do I do this? If someone could provide an example mutation I would really appreciate it.

I'm new to React and GraphQL so apologies if i've misunderstood something or left out key information.

Thanks.

[tolgapaksoy]

Historically, metadata has been used to store critical IDs and strings that shouldn't be exposed to a public API (like the Storefront API). That's why all metadata that's added through the Admin API, needs to be explicitly exposed using another GraphQL Admin API mutation called metafieldStorefrontVisibilityCreate.

It's annoying, but there's a good reason why this is done (as I mentioned above).