---
title: parseMetafield
description: A function that uses metafield.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/parsemetafield'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/parsemetafield.md'
api_name: hydrogen
---

# 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**

  **{ id?: string; \_\_typename?: "Metafield"; createdAt?: string; description?: string; key?: string; namespace?: string; parentResource?: { metafield?: { id?: string; \_\_typename?: "Metafield"; createdAt?: string; ... 8 more ...; value?: string; }; ... 29 more ...; weightUnit?: WeightUnit; } | ... 13 more ... | { ...; };...**

  **required**

### Returns

* **ReturnGeneric**

Examples

### Examples

* #### Example code

  ##### 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>
    );
  }
  ```

***