Hook for updating an existing Asset.

​
Usage

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 Tanstack Query, 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 Tanstack Query 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 },
  });
}

Was this page helpful?

useAssetuseAssetMetrics