Skip to main content

parseMetafield

The parseMetafield utility creates a new metafield object with a value that has been parsed according to the metafield type.

Example code​

import {parseMetafield, Metafield} from '@shopify/hydrogen';

export function Product(product) {
  const metafield = parseMetafield(product.metafield);

  return (
    <div>
      {metafield.value}
    </div>
  );
}

You can also wrap parseMetafield in useMemo() to maintain a stable object identity across renders.

import {useMemo} from 'react'
import {parseMetafield, Metafield} from '@shopify/hydrogen';

export function Product(product) {
  const metafield = useMemo(() => parseMetafield(product.metafield), [product.metafield]);

  return (
    <div>
      {metafield.value}
    </div>
  );
}

Arguments​

This hook takes a single object with the following key:

KeyTypeDescription
metafields?PartialDeep&#60;MetafieldConnection&#62;A MetafieldConnection.

Return type​

This hook returns an array of metafields whose values have been parsed according to the metafield type. For details on the parsed value, refer to the parseMetafieldValue utility.