How To Fix Youtube Data Api V3 Required Parameter: Part In Axios Request And React.js

I'm trying to run some queries with the Youtube Data API v3 which should return some videos from the Youtube API but I get an error of 'Required parameter: part' I have tried makin

Solution 1:

This is because you are overwriting your params in your App component.

See codesandbox here, and code below.

You could do something like the following:

import axios from"axios";
constKEY = "AIzaSyAL9jCDWvRD2G5nUgBrLEgEhZTQsRvzt80";

exportconst baseParams = {
  part: "snippet",
  maxResults: 5,
  key: KEY
};

exportdefault axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3"
});

And then your react component

importReactfrom'react';
importSearchBarfrom'./SearchBar';
import youtube, { baseParams } from'../components/apis/youtube';

classAppextendsReact.Component {

  onTermSubmit = (term) => {
    youtube.get('/search', {
      params: {
        ...baseParams,
        q: term
      }
    });
  }
  render() {
    return (
      <divclassName="ui container"><SearchBaronFormSubmit={this.onTermSubmit} /></div>
    )
  }
}

exportdefaultApp;