@shopify/shop-minis-react/src/hooks/product/useProductMedia.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {useMemo} from 'react'

import {useShopActions} from '../../internal/useShopActions'
import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
import {
  PaginatedDataHookOptionsBase,
  PaginatedDataHookReturnsBase,
  ProductMedia,
} from '../../types'

export interface UseProductMediaParams extends PaginatedDataHookOptionsBase {
  /**
   * The product ID to fetch media for.
   */
  id: string
}

interface UseProductMediaReturns extends PaginatedDataHookReturnsBase {
  /**
   * The product media returned from the query.
   */
  media: ProductMedia[] | null
}

export const useProductMedia = (
  params: UseProductMediaParams
): UseProductMediaReturns => {
  const {getProductMedia} = useShopActions()
  const {id, skip = false, ...restParams} = params

  const {data, ...rest} = useShopActionsPaginatedDataFetching(
    getProductMedia,
    {
      id,
      ...restParams,
    },
    {
      skip,
      hook: 'useProductMedia',
    }
  )

  const media = useMemo(() => {
    return data ?? null
  }, [data])

  return {
    ...rest,
    media,
  }
}