🎓 API access from Netlify Function

Inspired by Andy Bell’s website, I set out to build a “Last listened to” element that pulled data from my Last.FM profile.

A quick dig around and the use of a custom element later I decided to use Netlify Functions, as my site is already hosted there.

The idea was that, my custom element would hit a function in Netlify, which in turn would hit the Last.FM API to get the tracks that I have been listening to.

1. Last.FM API access setup ✅
2. Custom element added to my site, styled and making a call ✅
3. Basic Netlify function hosted and accessible, returning hardcoded data ✅
4. Render web component with the data ✅
5. Call Last.FM API from Netlify function 🔥

It turns out that calling an API from a Netlify function is not as easy as the documentation suggested.

require('node-fetch')

...

fetch("api-endpoint")
...

Solution

• Netlify functions defaults to Node 12.8(I think it was .8 🤷‍♂️)
• Node fetch v3 only works in Node >12.20
• Node fetch v3 doesn’t support require syntax
• Node fetch v2 doesn’t support import syntax
• Netlify CLI was great but had the classic “works on my machine” problem
• Setting the Node version in Netlify wasn’t easy 🤷‍♂️