Choose a version:

parseMetafield

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.

Anchor to parseMetafield
parseMetafield(
metafield
)

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

Anchor to parseMetafield-parametersParameters

Anchor to metafield 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

Anchor to parseMetafield-returnsReturns

ReturnGeneric

Examples

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>

);

}

Examples

Example code

JavaScript

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

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

Was this page helpful?

Anchor to parseMetafieldparseMetafield(metafieldmetafield)

Anchor to parseMetafield-parametersParameters

Anchor to parseMetafield-returnsReturns

Anchor to parseMetafield
parseMetafield(
metafield
)