Fetching Spider-Man
Hello readers! I haven’t been blogging too much lately — it’s not just the usual “I’ve been busy”, I have been, but now that I’m out of my bootcamp mandated blog-per-week I’ve been trying to use my limited free time for other things, for one, spending a little more time with family, but also, coding: totally revamped my portfolio site (and I must say, I love it), tightened up some issues with my existing apps, and, importantly, been practicing the nightmarish code challenges on LeetCode. I’ve also started a new app using the Marvel comics API, while building it, I found myself referencing my own blog entries quite a lot! Even if no one else reads these, they’ve been helping me, and I am back tonight to write about another less than intuitive problem I solved earlier today.
My new app will eventually be a comic collecting app. Users will login, search for comics (by way of the awesome Marvel API), add to their collections, read more about the comics and so on. I’ve started the backend but not done much with it yet, for now it’s a frontend-only comic search engine connected to the Marvel API and displayed in a really nice little React container I designed.
Now to the point. I was having some issues fetching data from the Marvel API. Their docs are actually really good and I was able to access the API easily by appending my public key to the URL, but in the app itself the fetching was inconsistent, sometimes it worked, other times it told me I need to provide a hash. What hash? Well, it’s a coded combination of any string, your public key and your secret key. It is NOT encrypted, it’s just a fingerprint of the original string, but it’s nearly impossible to reverse engineer it so it is a secure way to store your secret key and use it for fetch calls. This lets the API know that you’ve got not only the public key but also the private key, without exposing your private key.
To create the hash I went to this site and, one after another, with no spaces, entered:
string public key secret keyClicked “generate” and boom, magic hash appears. From there it was a simple matter of using string interpolation in my fetch call to fetch the data using all required parameters:
const publicKey = '8ba20045db37b24d33e34f26c4be8257'const hash = '4c2e71d472bde5cbb7bc4a17eac68621'
//remember, the hash is the encoded version of the public key, the string (I just used the number 1 for my string), and the secret keyconst url = `https://gateway.marvel.com/v1/public/comics?ts=1&apikey=${publicKey}&hash=${hash}&limit=100`fetch(url, this.configObj)
...
With all that set up it was no problem to fetch all of this glorious comic book data, ready to be manipulated all over my DOM:
Oh and if you are wondering what the “limit=100” parameter is all about, that’s telling the Marvel API to send me back up to 100 results. By default, they send you 20, which I thought looked a little lame. So I played with the limits and found 100 is the largest number they’ll accept, anything higher will bring you errors. But it’s a nice round number of comics to display on page load and in search results so I’ll stick with it.
It took me some time to figure this out so I wanted to write about it in case anyone else is messing with the Marvel API in the future and has a similar issue, but also as I said earlier, for my own future reference! That said, Marvel’s docs are some of the best I have ever seen for a public API and if you’re building a Marvel based app, I highly recommend reading them and playing with them for a while (they are interactive after all!)
Thanks for reading, hope to be back to writing more regularly soon!
