useUpdateAsset

Hook for updating an existing Asset (opens in a new tab).

Usage

React

import { useUpdateAsset } from '@livepeer/react';

The following example shows how an asset can be updated.

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 React Query (opens in a new tab), with some return types aggregated for simplicity.

{
  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.

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.

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:

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 React Query (opens in a new tab) useMutation options, such as cacheTime or retry. These override any configs passed by default by the internal hook.

import { useUpdateAsset } from '@livepeer/react';
 
function SomeComponent() {
  const { mutate: updateAsset } = useUpdateAsset({
    assetId,
    name: 'New Name',
    mutationConfig: { retry: 3 },
  });
}

useAssetMetrics useStream