> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# useUpdateAsset

> React Hook for updating an asset.

Hook for updating an existing
[Asset](https://github.com/livepeer/react/blob/main/packages/core/src/types/provider.ts).

## Usage

<Tabs>
  <Tab title="React">
    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import { useUpdateAsset } from '@livepeer/react';
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import { useUpdateAsset } from '@livepeer/react-native';
    ```
  </Tab>
</Tabs>

The following example shows how an asset can be updated.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
const assetId = "7ce29561-91ae-42cf-b9c0-6e46dbc1cc2d";

function SomeComponent() {
  const { data: asset } = useAsset({
    assetId,
    refetchInterval: 10000,
  });
  const {
    mutate: updateAsset,
    status,
    error,
  } = useUpdateAsset({
    assetId,
    storage: { ipfs: true },
  });

  return (
    <div>
      <button
        disabled={status === "loading"}
        onClick={() => {
          updateAsset?.();
        }}
      >
        Upload to IPFS
      </button>
      {asset && (
        <>
          <div>Asset Name: {asset?.name}</div>
          <div>IPFS CID: {asset?.storage?.ipfs?.cid ?? "None"}</div>
        </>
      )}
      {error && <div>{error.message}</div>}
    </div>
  );
}
```

## Return Value

The return value is partially based on
[Tanstack Query](https://tanstack.com/query/v4/docs/reference/useMutation), with
some return types aggregated for simplicity.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{
  data?: Asset,
  error?: Error,
  isError: boolean,
  isIdle: boolean,
  isLoading: boolean,
  isSuccess: boolean,
  status: 'idle' | 'loading' | 'success' | 'error',
  mutate: () => void,
  mutateAsync: () => Promise<Asset>,
  variables?: UpdateAssetArgs
}
```

## Configuration

### assetId

The asset ID to update - required.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { useUpdateAsset } from "@livepeer/react";

function SomeComponent() {
  const { mutate: updateAsset } = useUpdateAsset({
    assetId,
    name: "New Name",
  });
}
```

### name

The updated name for the asset.

### storage

The storage configs to use for the asset. This is preferably EIP-721 or EIP-1155
compatible metadata configs.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
type Storage = {
  /**
   * If the asset should be stored on IPFS.
   */
  ipfs?: boolean;
  /**
   * Metadata exported to the storage provider. This will be deep merged with the default
   * metadata from the livepeer provider. This should ideally be EIP-721/EIP-1155 compatible.
   *
   * @see {@link https://eips.ethereum.org/EIPS/eip-721}
   */
  metadata?: Partial<Metadata> & {
    [k: string]: unknown;
  };
  /**
   * The metadata template to use. `player` will embed the Livepeer Player's IPFS CID while `file`
   * will reference only the immutable media files.
   */
  metadataTemplate?: "player" | "file";
};
```

The metadata can be overridden when the Asset and its metadata are exported to
IPFS - we provide some helper types for metadata best practices based on ERC-721
and ERC-1155:

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
type Metadata = {
  /** Name of the Asset */
  name?: string;
  /** Description of the Asset */
  description?: string;
  /** Image URL for the Asset */
  image?: string;
  /** Properties of the Asset */
  properties?: {
    [k: string]: unknown;
  };
  /**
   * Background color for the Asset (OpenSea Standard)
   *
   * @see {@link https://docs.opensea.io/docs/metadata-standards}
   */
  background_color?: string;
  /**
   * Attributes for the Asset (OpenSea Standard)
   *
   * @see {@link https://docs.opensea.io/docs/metadata-standards}
   */
  attributes?: {
    [k: string]: unknown;
  };
};
```

### mutationConfig

The `mutationConfig` parameter allows for any
[Tanstack Query](https://tanstack.com/query/v4/docs/reference/useMutation)
`useMutation` options, such as `cacheTime` or `retry`. These override any
configs passed by default by the internal hook.

```tsx {7} theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { useUpdateAsset } from "@livepeer/react";

function SomeComponent() {
  const { mutate: updateAsset } = useUpdateAsset({
    assetId,
    name: "New Name",
    mutationConfig: { retry: 3 },
  });
}
```