---
title: parseMetafield
description: |2-

      A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
    
api_version: 2025-07
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/parsemetafield'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/parsemetafield.md'
---

# parse​Metafield

A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.

## parse​Metafield([metafield](#props-propertydetail-metafield)​)

Use the `ParsedMetafields` type as the returned type of `parseMetafield(metafield)`

### Parameters

* metafield

  PartialObjectDeep\<Metafield, { recurseIntoArrays: true; }>

  required

### Returns

* ReturnGeneric

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {parseMetafield} from '@shopify/hydrogen';

  export function DateMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);

    return <div>Date: {parsedMetafield.parsedValue?.toDateString()}</div>;
  }

  export function VariantReferenceMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);

    return <div>Variant title: {parsedMetafield.parsedValue?.title}</div>;
  }

  export function ListCollectionReferenceMetafield({metafield}) {
    const parsedMetafield = parseMetafield(metafield);

    return (
      <div>
        The first collection title: {parsedMetafield.parsedValue?.[0].title}
      </div>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {parseMetafield, type ParsedMetafields} from '@shopify/hydrogen';
  import type {Metafield} from '@shopify/hydrogen/storefront-api-types';

  export function DateMetafield({metafield}: {metafield: Metafield}) {
    const parsedMetafield = parseMetafield<ParsedMetafields['date']>(metafield);

    return <div>Date: {parsedMetafield.parsedValue?.toDateString()}</div>;
  }

  export function VariantReferenceMetafield({metafield}: {metafield: Metafield}) {
    const parsedMetafield =
      parseMetafield<ParsedMetafields['variant_reference']>(metafield);

    return <div>Variant title: {parsedMetafield.parsedValue?.title}</div>;
  }

  export function ListCollectionReferenceMetafield({
    metafield,
  }: {
    metafield: Metafield;
  }) {
    const parsedMetafield =
      parseMetafield<ParsedMetafields['list.collection_reference']>(metafield);

    return (
      <div>
        The first collection title: {parsedMetafield.parsedValue?.[0].title}
      </div>
    );
  }
  ```