0

I've followed the alchemy NFT marketplace course (https://www.youtube.com/watch?v=y6JfVdcJh1k&t=262s and https://github.com/alchemyplatform/RTW3-Week7-NFT-Marketplace) successfully but somehow the app stopped working and I am now getting an axis error which appears to be coming from the axios get request for the NFT tokenURI (IPFS pinata link containing the NFT metadata) in Marketplace.js coming from the line:

let meta = await axios.get(tokenURI);

I have been looking for a solution for two days and can not figure out why it is not working anymore. Any assistance would be greatly appreciated.

I am getting the below error:

https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 Marketplace.js:69 xhr.js:220 GET https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 400 dispatchXhrRequest @ xhr.js:220 xhrAdapter @ xhr.js:16 dispatchRequest @ dispatchRequest.js:58 request @ Axios.js:109 Axios.<computed> @ Axios.js:131 wrap @ bind.js:9 (anonymous) @ Marketplace.js:70 await in (anonymous) (async) getAllNFTs @ Marketplace.js:63 await in getAllNFTs (async) Marketplace @ Marketplace.js:95 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 beginWork$1 @ react-dom.development.js:27426 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performSyncWorkOnRoot @ react-dom.development.js:26085 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651 Marketplace.js:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} getAllNFTs @ Marketplace.js:91 await in getAllNFTs (async) Marketplace @ Marketplace.js:95 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 beginWork$1 @ react-dom.development.js:27426 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performSyncWorkOnRoot @ react-dom.development.js:26085 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651 xhr.js:220 GET https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 400 dispatchXhrRequest @ xhr.js:220 xhrAdapter @ xhr.js:16 dispatchRequest @ dispatchRequest.js:58 request @ Axios.js:109 Axios.<computed> @ Axios.js:131 wrap @ bind.js:9 (anonymous) @ Marketplace.js:70 await in (anonymous) (async) getAllNFTs @ Marketplace.js:63 await in getAllNFTs (async) Marketplace @ Marketplace.js:95 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20145 beginWork @ react-dom.development.js:21587 beginWork$1 @ react-dom.development.js:27426 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performSyncWorkOnRoot @ react-dom.development.js:26085 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651 Marketplace.js:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

See below the code from the Marketplace.js file:

import Navbar from "./Navbar"; import NFTTile from "./NFTTile"; // import MarketplaceJSON from "../Marketplace_goerli.json"; import MarketplaceJSON from "../Marketplace_localhost.json"; import axios from "axios"; import { useState } from "react"; export default function Marketplace() { const sampleData = [ { name: "NFT#1", description: "Alchemy's First NFT", website: "http://axieinfinity.io", image: "https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5", price: "0.03ETH", currentlySelling: "True", address: "0xe81Bf5A757CB4f7F82a2F23b1e59bE45c33c5b13", }, { name: "NFT#2", description: "Alchemy's Second NFT", website: "http://axieinfinity.io", image: "https://gateway.pinata.cloud/ipfs/QmdhoL9K8my2vi3fej97foiqGmJ389SMs55oC5EdkrxF2M", price: "0.03ETH", currentlySelling: "True", address: "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13", }, { name: "NFT#3", description: "Alchemy's Third NFT", website: "http://axieinfinity.io", image: "https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5", price: "0.03ETH", currentlySelling: "True", address: "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13", }, ]; const [data, updateData] = useState(sampleData); const [dataFetched, updateFetched] = useState(false); async function getAllNFTs() { const ethers = require("ethers"); //After adding your Hardhat network to your metamask, this code will get providers and signers const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); //Pull the deployed contract instance let contract = new ethers.Contract( MarketplaceJSON.address, MarketplaceJSON.abi, signer ); //create an NFT Token let transaction = await contract.getAllNFTs(); //Fetch all the details of every NFT from the contract and display const items = await Promise.all( transaction.map(async (i) => { const tokenURI = await contract.tokenURI(i.tokenId); console.log(tokenURI); let meta = await axios.get(tokenURI); meta = meta.data; console.log(` The tokenURI metadata are: ${meta}`); let price = ethers.utils.formatUnits(i.price.toString(), "ether"); let item = { price, tokenId: i.tokenId.toNumber(), seller: i.seller, owner: i.owner, image: meta.image, name: meta.name, description: meta.description, }; return item; }) ); updateFetched(true); updateData(items); } if (!dataFetched) getAllNFTs(); return ( <div> <Navbar></Navbar> <div className="flex flex-col place-items-center mt-20"> <div className="md:text-xl font-bold text-white">Top NFTs</div> <div className="flex mt-5 justify-between flex-wrap max-w-screen-xl text-center"> {data.map((value, index) => { return <NFTTile data={value} key={index}></NFTTile>; })} </div> </div> </div> ); }
Improve this question
6
  • console.log(tokenURI) can you copy the tokenURI and paste it to the browser see if you get the data Commented Dec 21, 2022 at 22:38
  • Thank you for your comment. I did this and get the below tokenURI which works in the browser: gateway.pinata.cloud/ipfs/… Commented Dec 21, 2022 at 23:37
  • The issue appears to be coming from the axios call which either return a 429 error or a 400 error (if a do just a single call). Commented Dec 22, 2022 at 2:35
  • FYI this was likely due to too many calls to the smart contract function. I am now using the Moralis API to retrieve NFT data which is much more efficient that doing it with custom made smart contract functions. The front end can now retrieve the data I want efficiently thanks to the Moralis NFT API. Commented Dec 26, 2022 at 13:17
  • I have the same issue, however it does seem that the file is successfully retrieved, but the error is still thrown. We ended up uploading the file to S3 as a cache, and so successive tries do work - do you see an issue with "settle"? Commented Jan 15, 2023 at 1:47

1 Answer 1

Reset to default
0

the error might be related to this: how-to-fix-400-errors-with-dedicated-gateways

when you make a request to pinata you have to add this header:

const res = await axios.get(tokenURI, { headers: { 'Accept': 'text/plain' } })
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.