For anyone who is still unsure on how to bypass metadata and display the URI properties without dismantling your code Moralis provides a very easy way to add and or replace metadata. Look for the useNFTBalance or the useNFTTokenIds hooks in the repository.
Inside the useEffect function you can easily add whatever metadata you want to replace by adding some short lines of code. See below.
useEffect(async () => {
if (data?.result) {
const NFTs = data.result;
setFetchSuccess(true);
for (let NFT of NFTs) {
if (NFT?.metadata) {
NFT.metadata = JSON.parse(NFT.metadata);
NFT.image = resolveLink(NFT.metadata?.image);
} else if (NFT?.token_uri) {
try {
await fetch(NFT.token_uri)
.then((response) => response.json())
.then((data) => {
NFT.image = resolveLink(data.image);
});
} catch (error) {
setFetchSuccess(false);
This part here is the trick… Use the NFT.image = resolveLink(data.image) as a guideline.
else if (NFT?.token_uri) {
try {
await fetch(NFT.token_uri)
.then((response) => response.json())
.then((data) => {
NFT.image = resolveLink(data.image); <------- RIGHT HERE!!
});
If you want to replace the name of the NFT metadata with the URI name add the name property
NFT.name = resolveLink(data.name);
If you want to replace the description metadata with the URI description add.
NFT.description = resolveLink(data.description);
At the end, your new hook should look something like this.
useEffect(async () => {
if (data?.result) {
const NFTs = data.result;
setFetchSuccess(true);
for (let NFT of NFTs) {
if (NFT?.metadata) {
NFT.metadata = JSON.parse(NFT.metadata);
NFT.image = resolveLink(NFT.metadata?.image);
} else if (NFT?.token_uri) {
try {
await fetch(NFT.token_uri)
.then((response) => response.json())
.then((data) => {
NFT.image = resolveLink(data.image);
NFT.name = resolveLink(data.name); <--- REPLACED DATA
NFT.description = resolveLink(data.description); <--- REPLACED DATA
});
} catch (error) {
setFetchSuccess(false);
This will automatically pick up any metadata from the metadata source or the URI source “null” or not and display it. I hope this helps for now
PS You can also add other custom properties that are in the metadata such as external_url and more.