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.