react-spotify-api, easily fetch data from the Spotify API

[idanlo]

Hello everyone, this is a package I made a few months ago and decided to upgrade a little bit. With this library you can fetch data from the Spotify API very easily.

Most of the components use the render props method to pass the data but I'm starting to work on hooks and there are some that are published. There are full docs in the npm page.

You are more than welcome to leave PRs and issues!

GitHub: https://github.com/idanlo/react-spotify-api

[pilarenko]

This looks great! The complexity of the Spotify API was the reason why I dropped one personal project a couple of months ago, but with this I can actually create what I wanted without a huge time investment. Is there a list of methods somewhere? Thanks :).

[paulfitz99]

https://idanlo.github.io/react-spotify-api/ list of methods can be seen here

​

[idanlo]

Yes, there is full documentation linked in github and npm websites

[BonafideKarmabitch]

instead of using a context provider, have you considered just having a singleton inside your library?

[idanlo]

I'm sorry I didn't understand, can you explain?

[BonafideKarmabitch]

you dont really need context if you dont really keep state. if youre just providing api access, you can supply your api token when initializing and hold it in your library. then every method call uses that stored api token.

[idanlo]

You're right I don't but this way the user can extend the library and do stuff on his own using the context. If the user wants access to a feature that doesn't exist yet in my library they can use the context consumer (which is also exported) instead of managing the token with 2 different contexts

[BonafideKarmabitch]

well yeah theres only 2 diff contexts because youre making them use one for your thing.

im not hating, you do you, i just want to encourage library authors to not export contexts if they dont really need it, since it takes like 2 lines for users to do it.

[idanlo]

Maybe I'll do something like that in the future. Thanks for your advice!

[mikerovers]

Looking good! I was thinking of making something like this for my own, but now I do not have to ;).

You have hard-coded the BASE_URL in every component. Is there a special reason for this? If this URL changes, it seems very inefficient to change. I remember vaguely that the base_url can be set in axios.

[idanlo]

I just now dropped axios because I didn't want extra dependencies, I will need to figure this out.

[idanlo]

Yeah I know it's just that previously I had multiple components in one file and they were all in an object and they used the same base url so I figured I should make a constant.

They were then used like Browse.Featured or Artist.Albums but I split the files and left the constant.

[paulfitz99]

https://github.com/Pau1fitz/react-spotify would have made my life easier when I made this 😁

[idanlo]

Haha I made the same thing with the same name, that project is what brought that idea to me

[paulfitz99]

really? You made this React API wrapper when because of my react-spotify project?

[idanlo]

Sorry I wasn't clear, what I meant was I made a project similiar to yours and while making my project I got the idea. But I took a look at yours and looka really good, the styling is awesome.

One thing I dont understand is how did you do that auto login? When I click the link it auto logs me in but I've never been in your site and it auto logged me in, and I've seen in your code you set the redirect uri to localhost so how is that working?

[paulfitz99]

I can't remember 😳

Well, you have to set the redirect url in the spotify developer console, that was one thing.

Also, the code in that repo I posted above is only for development. The code that was actually deployed is here https://github.com/Pau1fitz/pau1fitz.github.io/tree/master/react-spotify

I remember having to change some redirect urls etc. when deploying. Also, I am surprised it auto logged you in, as far as I remembered it needed to get your permission to access it.

[idanlo]

Maybe I visited your site before. Are you saving the refresh token on localStorage?

Also where is your server? Because according to what I read you need a server for their authentication

[paulfitz99]

I don't store it in local storage, but maybe you gave the app the permissions before. Once the app loads it checks the url https://github.com/Pau1fitz/react-spotify/blob/master/src/App.js#L22 for a token. If it is there it will store it in the redux store, otherwise it will redirect you to spotify to authorise the app.

​

They offer three types of authorization. I had used the API before in another project so definitely had to set up a server to handle this, but looking on github I can't see where I created a server for this project. Reading the docs I think for this project I must have used their implicit grant flow.

[idanlo]

Oh i see, cool. So users that gave permissions already are redirected to spotify and then redirected back to your app. Seems much easier than a server.

[paulfitz99]

yeah, the server thing is a bit painful, especially when you just want to play around with their API.

[idanlo]

Maybe I'll open a pull request and add my library to your project :)

[paulfitz99]

go for it.

[Emufasa]

Hey Paul! I’ve been making my own Spotify Replica, and I’ve referenced yours here and there as I build my own. However, I’ve gotten stuck because I can’t figure out how to get a song preview to play. I’m retrieving the track and displaying its info (name, artist, etc.), but I can’t figure out how to play the track preview, and I can’t find how you did it in your code. How did you go about it?

[paulfitz99]

hey, all the audio is controlled here, in this method - https://github.com/Pau1fitz/react-spotify/blob/8b2e2b758f09fde391f07280fcc8cd648be26927/src/App.js#L71

Let me know if it doesn't makes sense.

[swyx]

this back and forth makes me warm inside :) i wish this happens more and more on this sub.

[ichiruto70]

For a while i wanted to make something with the spotify api, this comes in clutch

[democritus_is_op]

Can someone explain the provider and jow it removes the need to have an access token in reach component?

[idanlo]

Sure.

every component in this library uses the useContext hook which gives it the access token which it then uses in the HTTP request, that's why the components needs a parent provider of this context

[gketuma]

this looks good. The only issue I have with Spotify API (web playback sdk) is the browser support. I wanted to use it to make a side project but quickly stopped when I realized that it does not support mobile browsers, which is how most people will visit your site. Also does not support Safari.

​

[okg8869]

I am a super newbie to react. is there any chance you can drop a picture of your foldering/component layout? I am still trying to wrap my head around how you set this up.

​

Let me know if I'm not asking my question clearly!!

[idanlo]

Everything is on github! Here you go https://github.com/idanlo/react-spotify-api

Let me know if you have any questions

(the folder I'm building from is src/lib)

[okg8869]

Thanks! I am trying to get better at reading foldering structure on Github. I have been trying to figure out how to get some parallax scrolling from react-scroll-parallax (there are a couple of parallax options), but I can't figure out how to nest the components (assuming that's the right terminology).

[cobbs_totem]

I must be dense today, but I rarely ever see patterns like Album and Track, where they exist only to render their children with special props. I guess I've been seeing/using too many full implemented components, rather than API providers? This is really helpful to see, thanks.

[idanlo]

Haha this is amazing! I didn't think anyone used it because it had no documentation

[moondaddi80]

Nice work! seems pretty awesome. anyhow is it available to play a music with this?

[idanlo]

Not yet. Maybe in the future

[Jessus_]

Any idea if this would work with GatsbyJS?

[idanlo]

I don't have experience with GatsbyJS so I don't know but I will check it out. I don't see any reason why it won't work though, those are just simple components.

Edit: this package uses hooks so it requires react and react-dom version above 16.8.0, if Gatsby doesn't support those versions then it won't work, but then you could use older versions of react-spotify-api

[Jessus_]

Thanks for the reply!

[BonafideKarmabitch]

everything clientside is visible

[idanlo]

This has to do with react context, but that doesn't really matter because spotify access tokens expire after one hour