hydrogen/packages/hydrogen/src/utilities/parseMetafieldValue/README.md

The parseMetafieldValue function parses a Metafield's value from a string into a sensible type corresponding to the Metafield's type.

Arguments

Description	Required
A Metafield object.	Yes

Return type

Depending on the type specified in the passed Metafield, the following type is returned:

Metafield type	value type
date	Date
date_time	Date
boolean	boolean
number_integer	int
number_decimal	float
json	An object
weight	An object with value and unit keys
dimension	An object with value and unit keys
volume	An object with value and unit keys
rating	An object with scale_min, scale_max, and value keys
color	string
single_line_text_field	string
multi_line_text_field	string
product_reference	string
file_reference	string
page_reference	string
variant_reference	string
url	string

Example code

import {
  parseMetafieldValue,
  Metafield,
  MetafieldFragment,
  flattenConnection,
  useShopQuery,
  Metafield,
} from '@shopify/hydrogen/client';
import gql from 'graphql-tag';

const QUERY = gql`
  query product($handle: String!) {
    product: productByHandle(handle: $handle) {
      metafields(first: 10) {
        edges {
          node {
            ...MetafieldFragment
          }
        }
      }
    }
  }

  ${MetafieldFragment}
`;

export function Product({handle}) {
  const {data} = useShopQuery({query: QUERY, variables: {handle}});

  const metafields = flattenConnection(data.product.metafields);
  const parsedMetafields = metafields.map((metafield) =>
    parseMetafieldValue(metafield),
  );

  return (
    <>
      {parsedMetafields.map((metafield) => {
        return <Metafield metafield={metafield} key={metafield.id} />;
      })}
    </>
  );
}

Related hook

• useParsedMetafields