TypeScript problem when using Metafield type with MediaImage reference.

[ramiroazar]

I'm trying to assign the Metafield type from @shopify/hydrogen/storefront-api-types to an image metafield.

interface ProductWithImage extends Product {
  image: Metafield
}

My query looks pretty similar to the this.

https://shopify.dev/api/hydrogen/utilities/parsemetafieldvalue

Then I'm trying to access the image.

const image = product.image.reference?.image

This throws the following when trying to access the image from reference?.image.

Property 'image' does not exist on type 'Product | Page | ProductVariant | GenericFile | MediaImage | Video'.

But the MediaImage type does have a conditional image field.

https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/packages/hydrogen/src/storefront-api-types.ts#L4099

Can anyone see what I'm missing?

[frehner]

In this type of situation, I would say that trying to build your own Storefront API TypeScript type is kind of a code-smell; if you're not transforming the Storefront API response in any way, then your TS type for it should be the exact type that we provide.

In order to best help you, it would help if we could see your exact query. But if you say it's similar to what you linked above, then you'll find that the metafield will be on product.metafield and not product.image.

But it's all hard to say without seeing a concrete example.

[ramiroazar]

Hey, thanks for taking a look.

I'm querying multiple metafields, so I'm using aliasing like in this example.

https://shopify.dev/api/examples/metafields#step-2-retrieve-metafields

So, my query is basically like this.

const QUERY = gql`
  query product($handle: String!) {
    product: productByHandle(handle: $handle) {
      image: metafield(namespace: "my_namespace", key: "my_key") {
        id
        type
        namespace
        key
        value
        createdAt
        updatedAt
        description
        reference @include(if: $includeReferenceMetafieldDetails) {
          __typename
          ... on MediaImage {
            id
            mediaContentType
            image {
              id
              url
              altText
              width
              height
            }
          }
        }
      }
    }
  }
`;

The result is a Product type with a custom metafield, so I don't think I can use the Product type as is without extending it, right?

All of this works fine, TypeScript doesn't complain about anything until getting the last image property inside reference.

[frehner]

Thanks, that example helps and clarifies what you were asking.

TS recognized that a Metafield's reference could be any number of different objects, like you pointed out above:

Property 'image' does not exist on type 'Product | Page | ProductVariant | GenericFile | MediaImage | Video'.

So in this case, you need to do what's called narrowing to help TS understand which one of those specific objects you are working with.

Here's a TypeScript playground link that should help demonstrate what that looks like.

TLDR:

// error
console.log(test?.image?.reference?.image)

// need to narrow the type for TS to be happy:
if(test?.image?.reference?.__typename === 'MediaImage') {
  // no error since we narrowed the type from being `Product | Page | ProductVariant | GenericFile | MediaImage | Video` to now just `MediaImage` 
  console.log(test?.image?.reference?.image)
}

[ramiroazar]

Ohhh, that makes perfect sense.

Thanks again for having another look.

That's super helpful.