Storefront API - Products metafield reference metaobject value working

Retired Boards Appdev Custom Storefronts
1

Hello,

I am new to Storefront API and Graph QL.

Below is the gql code of following operations:

  1. Get products by search query and first(3).

  2. Get attached “custom” metafield with reference of metaobject_reference.

ISSUE: How to get metafield value that is reference of metaobject value.

query getProducts($first: Int, $query: String) {
      products(first: $first,query: $query) {
        edges {
          cursor
          node { 
            id, title, featuredImage { url } , handle, options { id }, productType,
            device: metafield(namespace: "custom", key: "device") {
              type
              reference{
                ...on Metaobject{
                  id 
                  field(key: "iPhone-14"){ key } 
                }
              }
            }
          }
        }
      }
    }

Result:

{
  "id": "gid://shopify/Product/8846586970417",
  "title": "Abstract Colorful Waves Grippy Case for iPhone 14",
  "featuredImage": {
    "url": "https://cdn.shopify.com/s/files/1/0738/4626/0017/files/IP14-GRP-BLK-9852_2_568ed3f3-c480-40e8-81bb-f435dc221c36.png?v=1692334891"
  },
  "handle": "abstract-colorful-waves-designer-grippy-case-for-iphone-14",
  "options": [
    {
      "id": "gid://shopify/ProductOption/11170922496305"
    }
  ],
  "productType": "Designer Cases",
  "device": {
    "type": "metaobject_reference",
    "reference": {
      "id": "gid://shopify/Metaobject/17238393137",
      "field": null
    }
  }
}