I noticed I was hitting the 10,000 unit quota limit for the YouTube data api which doesn't seem right as I'm only pulling playlist videos for my app. Here's what I'm talking about.
I checked the Google Developer's console and saw that my unit usage was going up, so I removed the app from heroku and got a new key, and it seems to have stopped. Here is the code using the API.
import React, { Component } from 'react'
import { gapi } from 'gapi-script';
import '../css/YouTube.css'
import {Animated} from "react-animated-css";
import Spinner from 'react-bootstrap/Spinner'
import Button from 'react-bootstrap/Button'
import { FiArrowUpCircle } from "react-icons/fi";
export default class YouTube extends Component {
constructor(props){
super(props);
this.state = {
videos: [],
loading: true
};
this.loadClient = this.loadClient.bind(this);
this.execute = this.execute.bind(this);
this.swap = this.swap.bind(this)
}
componentDidMount(){
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: "Placeholder client id"});
});
this.loadClient().then(this.execute).then((array) => {
for (let i=0; i < array.length; i++){
array[i] = `https://www.youtube.com/embed/${array[i]}`;
}
this.setState({videos: array, loading: false})
});
}
swap(i1,i2){
let tempVids = this.state.videos;
let link1 = tempVids[i1],
link2 = tempVids[i2];
tempVids[i1] = link2;
tempVids[i2] = link1;
this.setState({videos: tempVids, loading: false})
}
loadClient(){
gapi.client.setApiKey("old api key");
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
execute(){
return gapi.client.youtube.playlistItems.list({
"part": [
"snippet"
],
"playlistId": "UUvgfXK4nTYKudb0rFR6noLA"
})
.then(function(response, array=[]) {
let videos = response.result.items;
for (let video of videos){
let id = video.snippet.resourceId.videoId;
array.push(id)
}
return array;
},
function(err) { console.error("Execute error", err);});
}
render() {
return (
<div>
<div className='load'>
<>{this.state.loading ? <Spinner animation="border" role="status" variant='light'></Spinner> : <div></div>}</>
</div>
<Animated animationIn='fadeInLeft'>
<div class='videos'>
<iframe className='primary' title='0' width="70%" height="576" src={this.state.videos[0]} frameBorder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<a rel="noopener noreferrer" target="_blank" href='https://www.youtube.com/user/UFC/videos'><h2>More Videos</h2></a>
<hr></hr>
<div className='bottom'>
<div className='secondary'>
<iframe className='primary' title='1' width="315" height="auto" src={this.state.videos[1]} frameBorder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<Button onClick={this.swap.bind(this,0, 1)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
</div>
<div className='secondary'>
<iframe className='primary' title='2' width="315" height="auto" src={this.state.videos[2]} frameBorder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<Button onClick={this.swap.bind(this,0, 2)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
</div>
<div className='secondary'>
<iframe className='primary' title='3' width="315" height="auto" src={this.state.videos[3]} frameBorder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<Button onClick={this.swap.bind(this,0, 3)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
</div>
<div className='secondary'>
<iframe className='primary' title='4' width="315" height="auto" src={this.state.videos[4]} frameBorder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<Button onClick={this.swap.bind(this,0, 4)} variant="success"><FiArrowUpCircle size='2em'></FiArrowUpCircle></Button>{' '}
</div>
</div>
</div>
</Animated>
</div>
)
}
}
However I'd rather these spikes didn't happen, how can I prevent these before using my new key and redeploying to heroku?
I hid all API stuff in a Node server and environment variables. I deployed the server to heroku and fetched from the server in the front end. This has fixed the problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With