I have a sample site I’ve been maintaining that has been recently affected by the new API Changes. I’ve been calling the Kraken API for the Top 25 trending clips, and since the changes to the helix API, my calls no longer works.
var vm = new Vue({
el:"#app",
data:{
Allclips: [],
Weeklyclips: [],
Show: ‘week’,
Keywords: ‘’
},
mounted(){
let APIurl1="https://api.twitch.tv/kraken/clips/top?parent=test.pogchampz.com&language=en&limit=25&period=all"
let APIurl2="https://api.twitch.tv/kraken/clips/top?parent=test.pogchampz.com&language=en&limit=25&trending=true"
let clientId='my_client_id'
let clientSecret='my_client_secret'
let accessToken='my_access_token'
function GetWeekly(){
return axios({
method:'get',
url:APIurl2,
headers:{
'Client-ID': clientId,
'Authorization': 'Bearer' + accessToken,
'Accept': 'application/vnd.twitchtv.v5+json'
}
})
};
axios.all([GetWeekly()])
.then(axios.spread(( Weeklyresponse)=>{
this.Weeklyclips= Weeklyresponse.data.clips
}))
},
})
Can you please help me figure out how to migrate to the new helix API?
I’ve been making some progress, I was able to successfully get a response using curl after generating a token with the twitch CLI. I’ve used that same token + client ID in my code but I seem to be getting a 401 response error " OAuth token is missing". I’m assuming this must have something to do with my Headers??
var vm = new Vue({
el:"#app",
data:{
Allclips: [],
Weeklyclips: [],
Show: 'week',
Keywords: ''
},
mounted(){
let APIurl1="https://api.twitch.tv/helix/clips?broadcaster_id=60056333"
let APIurl2="https://api.twitch.tv/helix/clips?broadcaster_id=60056333"
let clientId="****************"
let clientSecret="****************"
let accessToken1="****************"
function GetWeekly(){
return axios({
method:"get",
url:APIurl2,
headers:{
"Client-ID": clientId,
"Authorization": "Bearer" + accessToken1
}
})
};
axios.all([GetWeekly()])
.then(axios.spread(( Weeklyresponse)=>{
this.Weeklyclips= Weeklyresponse.data.clips
}))
},
})