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.