GraphQL Storefront API can now be used to power Stencil theme context

It is now possible to augment the data available in the theme context through the use of GraphQL queries described directly in the Front Matter of template files.

Using this capability, you can fetch data a little bit more flexibly to build your themes.

Here’s an example of using a GraphQL query in Front Matter to fetch metafields in product.html:

---
product:
videos:
limit: {{theme_settings.productpage_videos_count}}
reviews:
limit: {{theme_settings.productpage_reviews_count}}
related_products:
limit: {{theme_settings.productpage_related_products_count}}
similar_by_views:
limit: {{theme_settings.productpage_similar_by_views_count}}
gql: "query productMetafieldsById($productId: Int!) {
site {
product(entityId: $productId) {
metafields(namespace: \"my-namespace\") {
edges {
node {
key
value
}
}
}
}
}
}
"
---

More information on how to use this new storefront capability is available here: https://developer.bigcommerce.com/stencil-docs/reference-docs/front-matter-reference#graphql-attributes