如何使用@metaplex/js 和programs.metadata.Metadata 在React 中显示Metaplex NFT

Question

我正在尝试从文档中运行这个“入门”示例。 但是我认为发生了变化，programs.metadata.Metadata（显示在那里）不再起作用。

https://docs.metaplex.com/sdk/js/getting-started

他们建议这样做：

import { Connection, programs } from '@metaplex/js';

const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await programs.metadata.Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch {
    console.log('Failed to fetch metadata');
  }
};

run();

我的 React 应用程序中有这个：

import { Connection, programs } from '@metaplex/js';

const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await programs.metadata.Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch(error) {
    console.log('Failed to fetch metadata');
    console.log(error);
  }
};

function App() {

  return (
    <div className="App">
      <p onClick={run}>would be cool if it worked</p>
    </div>
  );
}

export default App;

我收到一个错误，好像programs.metadata.Metadata 不存在-“无法读取未定义的属性（读取'元数据'）”。 我什至把它从 React 中拿出来，做了一个简单的节点脚本来运行示例代码，它以同样的方式失败。

关于如何解决这个问题的任何想法？

Answer 1

对于通过搜索找到此问题的用户：现在有比直接使用@metaplex-foundation/mpl-token-metadata更好的解决方案。 看看@metaplex/js-next findByMint

这些线应该是你所需要的。 imageUrl将是图像路径。

import { Metaplex } from "@metaplex-foundation/js-next";
import { Connection, clusterApiUrl } from "@solana/web3.js";
const connection = new Connection(clusterApiUrl("mainnet-beta"));
const metaplex = new Metaplex(connection);
const mint = new PublicKey("ATe3DymKZadrUoqAMn7HSpraxE4gB88uo1L9zLGmzJeL");
const nft = await metaplex.nfts().findByMint(mint);
const imageUrl = nft.metadata.image;