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

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

对于通过搜索找到此问题的用户：现在有一个比直接使用CCD_ 1更好的解决方案。看看@metaplex/js下一个findByMint

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

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;