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";
const KEY = "AIzaSyAL9jCDWvRD2G5nUgBrLEgEhZTQsRvzt80";

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

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

And then your react component

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

class App extends React.Component {

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

export default App;