Trouble fetching Metaplex NFT metadata in React: @metaplex/js API changes?

NFT
1

Hey everyone, I’m having a hard time with the Metaplex SDK in my React app. I tried to follow their ‘getting started’ guide, but it looks like something’s changed with the programs.metadata.Metadata part. Here’s what I’m trying to do:

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

const connection = new Connection('devnet');
const nftId = 'ABC123XYZ789defGHI';

async function getNFTInfo() {
  try {
    const nftData = await programs.metadata.Metadata.load(connection, nftId);
    console.log(nftData);
  } catch(err) {
    console.log('Oops! Metadata fetch failed');
    console.log(err);
  }
}

function MyComponent() {
  return (
    <div>
      <button onClick={getNFTInfo}>Get NFT Data</button>
    </div>
  );
}

When I run this, I get an error saying it can’t read ‘Metadata’ of undefined. I even tried it in a plain Node script, but no luck. Has anyone else run into this? Any ideas on how to fix it or if there’s a new way to fetch NFT metadata with Metaplex? Thanks in advance!

2

heya OwenGadget78! i’ve been playing around with metaplex stuff too and yeah, it’s a bit tricky with all the changes lately. have you tried looking into the @solana/spl-token-metadata package? it might be a good alternative for what you’re trying to do. :thinking:

i’m curious, what kind of nft project are you working on? sounds interesting! maybe we could brainstorm some ideas or workarounds together?

oh, and just a thought - have you considered using the solana web3.js library directly? it might give you more flexibility, especially if you’re dealing with other solana stuff in your app. what do you think?

3

I encountered a similar issue recently. The Metaplex SDK has undergone significant changes, which means you need to update your import statement and adjust the code structure. First, install the new package ‘@metaplex-foundation/js’. Then update your import statements, create a Metaplex instance, and use the new findByMint method to fetch NFT data.

This new approach is more object-oriented and offers improved type safety. I recommend reviewing the official Metaplex documentation for up-to-date examples and best practices. Let me know if you need further clarification.

4

hey mate, had the same issue. metaplex changed their api recently. try using @metaplex-foundation/js instead of @metaplex/js. also, the syntax is different now. you’ll need to create a metaplex instance first. check their new docs, they’ve got updated examples. good luck!