Using Netlify Graph to create a simple ‘Now Playing’ Widget for my Gatsby site

My personal site has a small section in the ‘about me’ area where I display some recent songs I listened to on Spotify, which is generated at build time by the spotify-source plugin. I usually rebuild my site weekly, so this works fairly well for me to give some insight to my recent taste in music.

But what about a small widget that shows what I’m currently listening to? This might not be that useful, but I thought it would be a fun little exercise since I currently don’t use any serverless functions on my site. We could of course implement this feature by querying the spotify rest API directly, but handling the authentication without any kind of storage is kinda cumbersome. Either generate a refresh token once and use this to query a new access token on every request, or use an external storage solution. Option one is bad practice and option two would add another layer of complexity.

Good for us, Netlify just launched a new feature called Graph. Graph abstracts authentication for us and conveniently provides a GraphQL endpoint to query the Spotify API. Keep in mind, this feature is still in development though.

Connect Spotify and Netflify Graph

Spotify: First we need to setup the OAuth connection on the side of Spotify. Simply create a new App in your Spotify developer dashboard and generate your client id and secret. As for the redirect uri , you need to whitelist https://serve.onegraph.com/oauth/spotify/receive since Netlify is using OneGraph to provide this feature.

Netlify: Connect Spotify in your Graph settings on Netlify, by providing your generated client id and secret and activate both: authentication and graph explorer. After this you should see that both are active.

Creating the serverless function

If you haven’t already, it’s important to install the netlify cli

npm install netlify-cli -g

and link your repository to your netlify project

netlify link

To generate the function we use the graph explorer by starting Netlify dev with the graph feature

netlify dev --graph

This will provide you a URL for the graph editor where we can easily select anything we need from the Spotify API to create our widget.

Using the Graph Editor to create the API handler

This interface should be very familiar if you ever worked with GraphQL, here we can select all nodes we need for our widget. Don’t forget to authenticate to the Spotify endpoint under Authentication first.

The query for the now playing widget looks like this:

Save your changes and generate the handler

Actions -> Generate Handler

This will sync with your local project and generate the necessary files: ./netlify/functions/<QueryName>. Just make sure to open the generated file and select the correct authentication token like this:

const accessToken = event.authlifyToken;

Creating the component

The final component looks like this

First, let’s create a function to handle the call to our newly created function.

Very straight forward. If you use axios or similar libraries you could switch up the code for those, but I’m currently not using any client site request libraries so I opted to use the default fetch. I don’t need to support IE or Opera Mini anyway.

Custom Hook

Since I prefer working with TypeScript I will start by typing our function response:

To encapsulate all API handling, let’s create a custom hook which will be responsible for polling our function. I don’t want to spam too many requests, so I thought of two polling methods. Either static polling which will just fire a request after a certain interval or ‘calculated’ polling which will calculate the time remaining of the song we are currently listening to and fire a request after this time.

We use the useEffect hook to initiate our setTimeout ‘loop’ after the initial render, which will fetch our function and calculate when the next request should be sent.

Widget

The widget itself is pretty simple. Our custom hook is responsible to poll our function and we simply render our widget if we currently listen to anything. Since my site is built with Tailwind CSS I will style the component with the corresponding Tailwind classes. For a simple ‘equalizer’ effect in front of the album cover, to communicate the meaning of the widget a bit better, we simply create a few spans in an absolute container and add a CSS animation to those spans. If we delay the animation on each bar for a different amount of time we get the typical ‘equalizer’ effect.

Persist the player across page changes

I would like the player to persist across page changes instead of reloading on every page. For this we can either configure gatsby-browser.js and gatsby-ssr.js to use the wrapPageElement function or use the layout plugin. Both will hydrate our site correctly, but I opted for the layout plugin.

Just don’t forget to remove the layout wrapper in your pages and mount the now playing component in your layout wrapper.

Conclusion

I ran into some issues while setting up the OneGraph handler. Those were quickly resolved by unlinking my local repository, deleting the Netlify folder and start over, but it shows that this feature is still in development and should be used with caution. For my simple Blog, on the other hand, and the fact that this is more something fun than something necessary, this does not concern me. The OneGraph endpoint also seems to not reflect the official Spotify Rest API perfectly, which was a bit weird and I had to fire test requests, evaluate the response and generate my requests accordingly. This is very easy thanks to the GraphQL explorer but a little pain point none the less.

All in all this new feature did fit my use case perfectly fine and I look forward to integrate more projects like this.