How can I use a variant metafield to access a product's attributes?

[timd]

I've set up a Product Variant reference metafield but when I try to use the metafield:

{{ product.metafields.bundle.product_1 }}

the output value is a GraphQL ID string: 

gid://shopify/ProductVariant/517811666963

If I try to create a variant object from the metafield to access variant its attributes like id, title, product etc it doesn't output any data:

{%- assign variant = product.metafields.bundle.product_1 -%}
{{ variant.id }}

I'm guessing this is because the metafield is a string rather than an object. So how would I actually use a variant metafield to access the variant object's attribute?

[timd]

Alternatively, is there any way to assign a variant from a variant ID similar to the all_product function eg

Instead of:
{% assign product = all_products[product-handle] %}

Something like:
{% assign variantId = product.metafields.bundle.product_1 | replace: 'gid://shopify/ProductVariant/'',''
{% assign variant = all_variants[variantId] %}

{{ variant.title }}

Or is there a way to use GraphQL objects with Liquid?

[timd · Accepted solution]

I managed to figure this out, you just need to append .value to the end of the metafied:

{{ product.metafields.bundle.product_1.value }}

[kmart]

I'm having the same issue, only getting the gid, however, adding .value did not work for me. Do you think it could be a theme issue? example

<p>{{product.metafields.custom.product_1.value.title}}</p>

this did not produce any output

but this  <p>{{product.metafields.custom.product_1}}</p> produces

gid://shopify/Product/xxxxxxxxxxxx

[timd]

Have you tried: {{product.metafields.custom.product_1.value}}

[kmart]

Hi Timd,

Thanks! I solved the issue. The product wasn't published to any sales channels (especially the store one). After that it worked.