idanlo / react-spotify-api Goto Github PK

Documentation for all components and hooks

@idanlo Thanks for the great work on this project!

Using the library I noticed it does not set an error state when the API returns a non-200 status code. The error JSON data is returned in the data field.

Reproduction:

import { SpotifyApiContext, Artist } from 'react-spotify-api';

<SpotifyApiContext.Provider value="bad_access_token">
  <Artist id="6eUKZXaKkcviH0Ku9w2n3V">
    {(artist, loading, error) => (
      <div>
        <p>Artist: {JSON.stringify(artist)}</p>
        <p>Error: {JSON.stringify(error)}</p>
        <p>Loading: {JSON.stringify(loading)}</p>
      </div>
    )}
  </Artist>
</SpotifyApiContext.Provider>

Result:

Artist: {"error":{"status":401,"message":"Invalid access token"}}

Error: false

Loading: false

I would like to propose setting an error object when encountered with the API or at the very least set to true. Do you have any thoughts on this? Happy to help 😄

I first want to say how nice this library has been so far! Thank you.

I have installed version 3.0.0 and have hit an issue with my token expiring. From the docs, I gained the impression that the library would handle refreshing the token itself as long as I provide one when initilizing the provider. Is this a bug or am I misreading the docs?

Hi,

It looks like you're using regeneratorRuntime in the compiled useApiRequest.js, probably via compilation from Babel.
From dist/ApiRequest/useApiRequest.js

function _loadData() {
    _loadData = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
      var res, _data;

      return regeneratorRuntime.wrap(function _callee$(_context) {
...

But regeneratorRuntime itself is not defined nor imported.
I think that you need to update your .babelrc to include an extra babel plugin

When i try to implement any example component from the docs it never works. What am I doing wrong ?
Here's one of my component

import React from 'react';
import {Playlist} from "react-spotify-api"

function PlaylistComponent(props) {
    return (
        <Playlist id={props.id}>
            {({playlist}) => {
                return playlist ? <h3>{playlist.name}</h3> : null
            }}
        </Playlist>
    )
}

export default PlaylistComponent

I have been trying to make loadMoreData work with my UserArtists component, but I really can't find many examples of how to use loadMoreData or even some documentation that could help me.

This looks very promising I was wondering if it can be used with react-native and possibly expo.
I saw the html elements but they can be easily switched to the react native elements, is there anything that would stop this from working in react native and expo?
Thanks!

https://react-spotify.netlify.app/ simply shows Not Found.

add hooks for all spotify data types (user, playlist etc...)

create index.d.ts file with types for all components and hooks, maybe use @types/spotify-api (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/spotify-api) and @types/spotify-web-playback-sdk (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/spotify-web-playback-sdk)

axios takes a large size of the package (almost 50%) and I do not have any special uses that require the use of axios (only query params but this can be done with fetch).