---
title: useProductMedia
description: >-
  The useProductMedia hook fetches media items (images, videos, etc.) for a
  specific product.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/product/useproductmedia'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/product/useproductmedia.md'
---

# useProductMedia

The `useProductMedia` hook fetches media items (images, videos, etc.) for a specific product.

## use​Product​Media(**[params](#useproductmediageneratedtype-propertydetail-params)**​)

### Parameters

* **params**

  **UseProductMediaParams**

  **required**

### Returns

* **UseProductMediaReturns**

### UseProductMediaParams

* fetchPolicy

  ```ts
  DataHookFetchPolicy
  ```

* first

  ```ts
  number
  ```

* id

  The product ID to fetch media for.

  ```ts
  string
  ```

* skip

  ```ts
  boolean
  ```

### DataHookFetchPolicy

```ts
'cache-first' | 'network-only'
```

### UseProductMediaReturns

* error

  ```ts
  Error | null
  ```

* fetchMore

  ```ts
  () => Promise<void>
  ```

* hasNextPage

  ```ts
  boolean
  ```

* loading

  ```ts
  boolean
  ```

* media

  The product media returned from the query.

  ```ts
  ProductMedia[] | null
  ```

* refetch

  ```ts
  () => Promise<void>
  ```

### ProductMedia

```ts
{
      id: string
      image: ProductImage | null
      mediaContentType: 'IMAGE'
      alt: string | null
    } | {
      id: string
      mediaContentType: 'MODEL_3D'
      previewImage: ProductImage | null
      sources: {
        filesize: number
        format: string
        mimeType: string
        url: string
      }[]
      alt: string | null
    } | {
      id: string
      mediaContentType: 'VIDEO'
      previewImage: ProductImage | null
      sources: {
        format: string
        mimeType: string
        url: string
        width: number
        height: number
      }[]
      alt: string | null
    } | {
      id: string
      mediaContentType: 'EXTERNAL_VIDEO'
      previewImage: ProductImage | null
      embedUrl: string
      alt: string | null
    }
```

### ProductImage

* altText

  ```ts
  string | null
  ```

* height

  ```ts
  number | null
  ```

* id

  ```ts
  string | null
  ```

* sensitive

  ```ts
  boolean | null
  ```

* thumbhash

  ```ts
  string | null
  ```

* url

  ```ts
  string
  ```

* width

  ```ts
  number | null
  ```

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import {useProductMedia, Button} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {media, loading, error, hasNextPage, loadMore} = useProductMedia({
      id: 'gid://shopify/Product/123',
      first: 10,
    })

    console.log({media, loading, error})

    return (
      <>
        {/* Render media items here */}
        {hasNextPage && (
          <Button onClick={loadMore} disabled={loading}>
            Load More Media
          </Button>
        )}
      </>
    )
  }
  ```

***