title: reading data from Express Server after making Axios call in ReactJS, Spotify API
body: <p>My goal is to retrieve the data from the endpoint <a href="https://api.spotify.com/v1/me/top/tracks" rel="nofollow noreferrer">https://api.spotify.com/v1/me/top/tracks</a>. I've setup an express server to handle routing and here is the endpoint.</p>
  <pre><code>app.get('/api/top/tracks', (req, res) =&gt; {
  
    axios({
      method: 'GET',
      url: 'https://api.spotify.com/v1/me/top/tracks',
      data: queryString.stringify({
        limit: 30,
        offset: 0,
        time_range: 'medium_term'
      }),
      headers: {
        'Authorization': 'Basic ' + encodedPayload,
        'Content-type': 'application/json',
      }
    }).then(response =&gt; {
      console.log(response.data)
      res.json(response.data)
   }).catch(error =&gt; console.log(error.response))
  })
  </code></pre>
  <p>In another React functional component, I am trying to read the value in a useEffect, something like this.</p>
  <pre><code>
    const [topTracks, setTopTracks] = useState(tracks)
  
    useEffect(() =&gt; {
      async function getTopTracks() {
        const response = await fetch('/api/top/tracks');
        const json = await response.json();
        setTopTracks(json);
      }
  
      getTopTracks();
  
    }, []);
  </code></pre>
  <p>In all honesty I think I just don't understand the Response Promise object from API calls and am not sure how to handle the data I am attempting to retrieve.</p>
  <p><a href="https://i.stack.imgur.com/k9Wqj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k9Wqj.png" alt="" /></a></p>
  <p>EDIT: Appended .catch to the end of axios call. But now I receive a very long error response for an HTTP error 400 Bad Request.</p>