Why is the Metafield.reference returning empty in my API call?

Technical Q&A
1

Hi! community,

I want to get video in metafield for first view.

But, API returns empty Metafield.reference, and component doesn’t work.

See an example code based on demo-store.

const HOMEPAGE_CONTENT_QUERY = gql`
  ${MEDIA_FRAGMENT}
  ${PRODUCT_CARD_FRAGMENT}
  query homepage($country: CountryCode, $language: LanguageCode)
  @inContext(country: $country, language: $language) {
    pageInfo: page(handle: "top") {
      metafield(namespace: "top_page", key: "fv_video") {
        createdAt
        description
        id
        key
        namespace
        parentResource
        reference
        type
        updatedAt
        value
      }
    }
    ............
  }
`;

const {data} = useShopQuery<{
    pageInfo: Page;
    heroBanners: CollectionConnection;
    featuredCollections: CollectionConnection;
    featuredProducts: ProductConnection;
  }>({
    query: HOMEPAGE_CONTENT_QUERY,
    variables: {
      language: languageCode,
      country: countryCode,
    },
    preload: true,
  });

  const {
    pageInfo: {metafield},
    heroBanners,
    featuredCollections,
    featuredProducts,
  } = data;
  console.log(metafield);
/***
{
  createdAt: '2022-08-01T03:31:31Z',
  description: null,
  id: 'gid://shopify/Metafield/***********',
  key: 'fv_video',
  namespace: 'top_page',
  parentResource: {},
  reference: {},
  type: 'file_reference',
  updatedAt: '2022-08-01T03:31:31Z',
  value: 'gid://shopify/Video/***********'
}
***/
2

Sorry, I’m missing properties of Metafield.reference.
Define fragment and attach then it works.

export const VIDEO_FRAGMENT = gql`
  fragment Video on Video {
    alt
    id
    mediaContentType
    previewImage {
      url
    }
    sources {
      mimeType
      url
    }
  }
`;

pageInfo: page(handle: "top") {
  metafield(namespace: "top_page", key: "fv_video") {
    createdAt
    description
    id
    key
    namespace
    parentResource
    reference {
      ...Video
    }
    type
    updatedAt
    value
  }
}