Announcements

Help Wizard

Step 1

NEXT STEP

FAQs

Please see below the most popular frequently asked questions.

Loading article...

Loading faqs...

VIEW ALL

Ongoing Issues

Please see below the current ongoing issues which are under investigation.

Loading issue...

Loading ongoing issues...

VIEW ALL

Trouble with displaying public artist info on NextJS/Typescript App

Trouble with displaying public artist info on NextJS/Typescript App

 

Plan

Free/Premium

Country

 

Device

(iPhone 8, Samsung Galaxy 9, Macbook Pro late 2016)

Operating System

(iOS 10, Android Oreo, Windows 10,etc.)

 

My Question or Issue

I'm trying to display a list of artist albums by artist ID - with this code snippet & a client ID from the dashboard, I keep getting 401 errors. Not sure what I am doing wrong. 

I don't need users to login, just display public information of all albums from an artist ID



Screenshot 2023-10-12 at 10.26.52 AM.png

 

 

 

 

 

import React, { useEffect, useState } from "react";
import SpotifyWebApi from "spotify-web-api-js";

const spotifyApi = new SpotifyWebApi();

interface ArtistInfoProps {
  clientId: string;
  artistId: string;
}

const ArtistInfo: React.FC<ArtistInfoProps> = ({ clientId, artistId }) => {
  const [artist, setArtist] = useState<any>();

  useEffect(() => {
    // Initialize the Spotify API client with your client ID
    spotifyApi.setAccessToken(clientId);

    // Fetch artist information
    spotifyApi
      .getArtist(artistId)
      .then((data) => {
        setArtist(data);
      })
      .catch((error) => {
        console.error("Error fetching artist information:", error);
      });
  }, [clientId, artistId]);
  console.log(artist);
  return (
    <div>
      {artist && (
        <div>
          <h2>{artist.name}</h2>
          <p>Followers: {artist.followers.total}</p>
          {/* Add more artist information as needed */}
        </div>
      )}
    </div>
  );
};

export default ArtistInfo;
​

 

 

 

 



Reply
1 Reply

Suggested posts