Struggling with types

[renatodex]

Hey hey.

I just installed Hydrogen here to play around, and I'm having a lot of troubles with how to use types correctly on the Hydrogen handlers. (spent several hours trying to understand this already and I'm still very confused)

Basically what I wanted to do is to bring product images, so I've changed the default Fragment that comes in product.$handler file to this:

const PRODUCT_VIDEO_FRAGMENT = `#graphql
  ... on Video {
    id
    mediaContentType
    previewImage {
      id
      url
      width
      height
      altText
    }
  }
`;

const PRODUCT_EXTERNAL_VIDEO_FRAGMENT = `#graphql
  ... on ExternalVideo {
    mediaContentType
    id
    embedUrl
    host
    originUrl
    presentation {
      id
    }
    previewImage {
      id
      url
      width
      height
      altText
    }
  }
`;

const PRODUCT_IMAGE_FRAGMENT = `#graphql
  ... on MediaImage {
    mediaContentType
    image {
      url
      altText
      width
      height
    }
  }
`;

const PRODUCT_FRAGMENT = `#graphql
  fragment Product on Product {
    id
    title
    vendor
    handle
    descriptionHtml
    description
    media(first: 10) {
      nodes {
        ${PRODUCT_IMAGE_FRAGMENT}
        ${PRODUCT_VIDEO_FRAGMENT}
        ${PRODUCT_EXTERNAL_VIDEO_FRAGMENT}
      }
    }
    options {
      name
      values
    }
    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
      ...ProductVariant
    }
    variants(first: 1) {
      nodes {
        ...ProductVariant
      }
    }
    seo {
      description
      title
    }
  }
  ${PRODUCT_VARIANT_FRAGMENT}
` as const;

The GraphQL works, and it returns all my media files, including the videos.
However, I have 2 problems:

1. I keep getting this error on the top of my file:
   
2. I can't get Codegen to properly add my Media fragments.

To be honest, the problem 1 is happening becausee the first time I've run h2 codegen , it basically REMOVED ProductFragments from storefront.generated.d.ts:

So things I'm REALLY confused about:

1. It doesn't make sense for codegen to remove my ProductFragment considering it was being actively used in the product.$handler.
2. I'm confused why codegen didnt find my media fragments.
3. I'm confused why codegen decided to delete a bunch of other fragments when I've run the command:
   

I'm adding the Diff file of storefront.generate.d.ts as reference.

storefrontapi.generate.d.ts.diff.zip

[renatodex]

Okay, I've figured by myself.
This is the code that solved the problem:

const PRODUCT_IMAGE_FRAGMENT = `#graphql
  fragment ProductMediaImage on MediaImage {
    __typename
    mediaContentType
    image {
      __typename
      id
      url
      altText
      width
      height
    }
  }
` as const;

const PRODUCT_EXTERNAL_VIDEO_FRAGMENT = `#graphql
  fragment ProductExternalVideo on ExternalVideo {
    mediaContentType
    id
    embedUrl
    host
    originUrl
    presentation {
      id
    }
    previewImage {
      id
      url
      width
      height
      altText
    }
  }
` as const;

const PRODUCT_VIDEO_FRAGMENT = `#graphql
  fragment ProductVideo on Video {
    id
    mediaContentType
    previewImage {
      id
      url
      width
      height
      altText
    }
  }
` as const;

const PRODUCT_FRAGMENT = `#graphql
  fragment Product on Product {
    id
    title
    vendor
    handle
    descriptionHtml
    description
    options {
      name
      values
    }
    media(first: 10) {
      nodes {
        ...ProductMediaImage
        ...ProductExternalVideo
        ...ProductVideo
      }
    }
    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
      ...ProductVariant
    }
    variants(first: 1) {
      nodes {
        ...ProductVariant
      }
    }
    seo {
      description
      title
    }
  }
  ${PRODUCT_VARIANT_FRAGMENT}
  ${PRODUCT_IMAGE_FRAGMENT}
  ${PRODUCT_EXTERNAL_VIDEO_FRAGMENT}
  ${PRODUCT_VIDEO_FRAGMENT}
` as const;

Initially I was struggling to make this work because:

1. My GraphQL had errors
2. I was trusting Shopify Documentation but Hydrogen has a different idea of what types are.

So either Shopify documentation or Hydrogen implementation is wrong.

If you look at this object on Shopify Docs:
https://shopify.dev/docs/api/storefront/2024-07/objects/MediaImage

You will see it has a mediaContentType on the root of the MediaImage object.
However, according to Hydrogen implementation, MediaImage#image also must declare a typename, otherwise you will have Typescript errors when using the image attribute.

If you open node_modules, you can see the Image type was defined with a typename attribute, while this attribute doesn't exist on Shopify Documentation: (of course, because it's a internal field related to GraphQL, but not ideal from the dev experience standpoint)

Technically, it would not be a problem, since __typename is a technical field from GraphQL, and should be automatically added to every graphql object, but for some reason in Hydrogen this is not as seemeless as one could think, so I had to add it manually.

I've fixed the problem by adding __typename to MediaImage#Image definition in the Fragment.

[meisbellajack]

I feel your pain I spent an entire weekend fighting with the ProductFragment and Storefront.query types when I first started. The trick is usually in how the codegen handles those fragments. If you've updated the Fragment but your IDE isn't seeing the new fields (like images), make sure you've re-run npm run graphql-codegen so the TypeScript definitions actually match your new query.

On a side note, if you're pulling in images to build things like custom color swatches or dynamic product galleries, handling those types in a headless setup can get incredibly complex fast. I’ve been working on Misk Smart Product Options, which is designed to handle that 'heavy lifting' on the frontend logic. It lets you import and display images/options without having to manually map every single GraphQL fragment and type definition for each new variant.

Once you get the codegen synced, it gets a lot smoother hang in there