Fetching assets

[joefitter]

Umi version

0.7.5

Code

const [file] = await umi.downloader.download([item.metadata.uri])

Error

response.headers.raw is not a function (browser)

[joefitter]

Hi, looking at if there is an equivalent pattern in UMI for fetching offchain assets, similar to the metaplex.nfts().load() or findByMint() which fetch the json.

I have tried to use the UMI.downloader interface but am coming up against this error in browser.

When using the method in a node environment it throws an error ECONNRESET while fetching a list of metadata files. Is there a way to implement this with error handling and throttling?

Many thanks

[lorisleiva]

Hi Joe, I believe this is a bug on the default implementation of the Downloader interface. I did not know I wasn't allowed to use the raw function in the browser. I'll make a PR for this and keep you posted here.

[joefitter]

Thank you! - appreciate your help as always

[lorisleiva]

@joefitter I published 0.7.9 with a change that uses headers.entries() instead of headers.raw(). Would you mind letting me know if this fixes the issue in the browser? 🙏

[joefitter]

trying this now! thank you for the super quick fix!

[joefitter]

@lorisleiva closer! The headers.raw error has gone but getting a CORS error now

[lorisleiva]

Nice! Hmm could you change your server's CORS settings to allow for GET redirects?

[joefitter]

this is a static site running in the browser trying to fetch arweave json, there isn't a server.

This actual code it running fine now using the JS SDK, just trying to upgrade it!

[lorisleiva]

It's strange because both the JS SDK and Umi use the same library under the hood, i.e. "node-fetch": "^2.6.7". Let me dig into it a bit more.

[lorisleiva]

I've started a new next-js app and I can reproduce I'm afraid. The following code is working.

import { createUmi } from "@metaplex-foundation/umi-bundle-defaults";

export default async function Home() {
  const umi = createUmi("https://api.mainnet-beta.solana.com");
  const uri = "https://madlads.s3.us-west-2.amazonaws.com/json/6837.json";
  const jsonData = await umi.downloader.downloadJson(uri);
  return (
    <main>
      <pre>
        <code>{JSON.stringify(jsonData, null, 2)}</code>
      </pre>
    </main>
  );
}

Would you be able to either share your repo or create a small public repo that reproduces the issue?

[joefitter]

Will check this today and let you know

[joefitter]

Hi again Loris, apologies for not replying to this issue again sooner - I have it working with the Metaplex SDK so left it while I was working on other things.

I have just tested the example you included above, and can confirm this URI does in fact work, however most URIs when reading a wallet using this method throw a CORS error.

Here is an example of one that throws an error: https://bafybeieq3azatw46olnj7nam34cfxkerlio2pvkvgu7ttx5qzjasglxgfe.ipfs.nftstorage.link/1531.json

Just to reiterate - this works using the Metaplex JS SDK, so I'm not sure what's happening under the hood differently in the UMi implementation

[lorisleiva]

Thanks for the update Joe, I'll keep digging into why this is happening when I have a moment. 🙏

[lorisleiva]

I figured out the issue! I was setting the content-type header when fetching JSON files which triggers a CORS preflight. I didn't know about that, I thought only non-GET requests and requests with Authorization needed a preflight.

The latest version of Umi should now fetch JSON files without any CORS issues! 🥳

[joefitter]

you're a hero! Confirmed working as expected - thanks a bunch <3

[lorisleiva]

Thanks for confirming! 🍻