getPreferredImageSize.ts

// Function to get preferred image size from a images data object delivered by Payload CMS.
interface ImageSizeData {
  alt: string;
  url?: string | null;
  filename?: string | null;
  mimeType?: string | null;
  filesize?: number | null;
  width?: number | null;
  height?: number | null;
  sizes?: { [key: string]: Omit<ImageSizeData, "alt" | "sizes"> };
}

type SizeKeys<T> = T extends { sizes?: infer S }
  ? S extends null | undefined
    ? never
    : keyof NonNullable<S>
  : never;

export function getPreferredImageSize<T extends ImageSizeData>(
  image: T,
  preferredSize?: SizeKeys<T>,
): Omit<ImageSizeData, "sizes"> {
  if (preferredSize && image.sizes && preferredSize in image.sizes) {
    const preferredImage = image.sizes[preferredSize] as Omit<ImageSizeData, "alt" | "sizes">;
    return {
      alt: image.alt,
      ...preferredImage,
    };
  }

  return {
    alt: image.alt,
    url: image.url,
    filename: image.filename,
    mimeType: image.mimeType,
    filesize: image.filesize,
    width: image.width,
    height: image.height,
  };
}
    
// ----------------------------------------------
// Usage: Payload Types return the different 
// image sizes, bringing typesafe image fetching.
// Note: getPreferredImageSize(avatar, size)
// -- this will know sizes available -- ^
    
const createAvatarUrl = (avatar?: string | Avatar | null) =>
  avatar && typeof avatar === "object"
    ? (getPreferredImageSize(avatar, "large").url ?? undefined)
    : undefined;