4

Actually I am working on Twitch Tv dashboard in react.js by following this tutorial https://www.youtube.com/watch?v=VTY6ZzDTV3A&t=197s

Everything was working but my twitch api is not working, please can anyone help me to sort it out this bug.

This is the error showing in my console:

Uncaught (in promise) Error: Request failed with status code 401
    createError createError.js:16
    settle settle.js:17
    handleLoad xhr.js:61
createError.js:16
    fetchData Games.js:30
    AsyncFunctionThrow self-hosted:697

This is my code which i am working on it that is given below:

Games.js :

import React, { useState, useEffect } from "react";
import api from "../api";
import { Link } from "react-router-dom";


function Games() {

    const [games, setGames] = useState([]);

    useEffect(() => {

        const fetchData = async () => {
    const result = await api.get("https://api.twitch.tv/helix/games/top");
      
         // console.log(result.data);

         let dataArray = result.data.data;
         let finalArray = dataArray.map(game => {
            let newURL = game.box_art_url
          .replace("{width}", "300")
          .replace("{height}", "300");

          game.box_art_url = newURL;
 


         })

         setGames(result.data.data);

    };

    fetchData();

    });

    return (
        <div>

    <h1>Most Popular Games</h1>
       
       <div className="row">

    {games.map(game => (
        <div className='col-4'>

        <div className='card'>
          <img className="card-img-top" src={game.box_art_url} />
              <div className="card-body">
                <h5 className="card-title">{game.name}</h5>
                <button className="btn btn-success">
                  <Link
                    className="link"
                    to={{
                      pathname: "game/" + game.name,
                      state: {
                        gameID: game.id
                      }
                    }}
                  >
                    {game.name} streams{" "}
                  </Link>
                </button>
              </div>


        </div>  

        </div>

        ))}

        </div>

    </div>

);

}

export default Games;

Beside this, this is my api.js file which i add twitch tv api id:

import axios from 'axios';


let api = axios.create({
    headers: {
         "Client-ID": '4mfy053h9jf3zqwy3fh1pi55oadib1'
    }

});

export default api;
bombom
  • 107
  • 2
  • 12

2 Answers2

0

restart your react server development so the headers could be sent to the remote server

mwebi
  • 19
  • 2
0

You should read twitch documentation, in case you want to GET https://api.twitch.tv/helix/games there more headers to be add. You need Authorization: Bearer, and Client-id. You can check here

Fathurifki Elvarianto Gamal
  • 76
  • 5