Youtube V3 Data API - The server returns wrong list of videos to request React and Axios

Viewed 147

So I'm atempting to make a search request to Youtube API using Axios (with React) and I get a set of videos that have nothing to do with the search terms. Here a search based on the term "MKBHD":

{
    "data": {
        "kind": "youtube#searchListResponse",
        "etag": "8QF_NrI9lxk0tmSjS1yPRXHtIMk",
        "nextPageToken": "CAUQAA",
        "regionCode": "ES",
        "pageInfo": {
            "totalResults": 1000000,
            "resultsPerPage": 5
        },
        "items": [
            {
                "kind": "youtube#searchResult",
                "etag": "BGAtOg2raMag7uoUIEEocVBUUF8",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "KJvmdDBrXNU"
                },
                "snippet": {
                    "publishedAt": "2020-11-17T07:00:10Z",
                    "channelId": "UC-8Q-hLdECwQmaWNwXitYDw",
                    "title": "Katy Perry, Tiësto, Aitana - Resilient (Tiësto Remix) (Official #OpenToBetter Film)",
                    "description": "Katy Perry's new album \"Smile\" out now - http://katy.to/smileID Listen to “Resilient” (ft. Aitana) [Tiesto Remix] here ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/KJvmdDBrXNU/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/KJvmdDBrXNU/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/KJvmdDBrXNU/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "KatyPerryVEVO",
                    "liveBroadcastContent": "none",
                    "publishTime": "2020-11-17T07:00:10Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "reukPzR-cXyw-9tlM_Pii1aIT4c",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "FrOxVLuokyY"
                },
                "snippet": {
                    "publishedAt": "2022-03-25T00:13:59Z",
                    "channelId": "UC9TO_oo4c_LrOiKNaY6aysA",
                    "title": "Daddy Yankee x Myke Towers - Pasatiempo (Video Lyric)",
                    "description": "Daddy Yankee Ft. Myke Towers - Pasatiempo (Video Lyric) Suscríbete al canal: Subscribe to the channel: changed because this generated an error on  SO...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/FrOxVLuokyY/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/FrOxVLuokyY/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/FrOxVLuokyY/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "Daddy Yankee",
                    "liveBroadcastContent": "none",
                    "publishTime": "2022-03-25T00:13:59Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "09oU9xnUNZ43GxuQRr9zk66cQMk",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "siJaiEqcCNo"
                },
                "snippet": {
                    "publishedAt": "2020-11-13T00:00:05Z",
                    "channelId": "UC-8Q-hLdECwQmaWNwXitYDw",
                    "title": "Katy Perry, Tiësto - Resilient (ft. Aitana) (Tiësto Remix) (Official Visualizer)",
                    "description": "Katy Perry's new album \"Smile\" out now - http://katy.to/smileID Listen to “Resilient” (ft. Aitana) [Tiesto Remix] here: ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/siJaiEqcCNo/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/siJaiEqcCNo/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/siJaiEqcCNo/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "KatyPerryVEVO",
                    "liveBroadcastContent": "none",
                    "publishTime": "2020-11-13T00:00:05Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "xhh4cWo_Tbt8b0oDTTChl9Ot4fY",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "PoMM05OTsj0"
                },
                "snippet": {
                    "publishedAt": "2021-09-23T22:00:11Z",
                    "channelId": "UCcGkH2WL3DuR0x8kWivNNvA",
                    "title": "Alex Ubago - A gritos de esperanza ft. Jesús Navarro (Videoclip Oficial)",
                    "description": "Videoclip oficial de la canción \"A gritos de esperanza\" de @Alex Ubago en colaboración con Jesús Navarro. Disponible en todas ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/PoMM05OTsj0/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/PoMM05OTsj0/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/PoMM05OTsj0/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "Alex Ubago",
                    "liveBroadcastContent": "none",
                    "publishTime": "2021-09-23T22:00:11Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "PzHDjevlrW1ePp_SuhIcxHXcsgE",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "knm7_sN4cfA"
                },
                "snippet": {
                    "publishedAt": "2009-12-14T11:35:01Z",
                    "channelId": "UCcGkH2WL3DuR0x8kWivNNvA",
                    "title": "Alex Ubago - Me arrepiento (Video clip)",
                    "description": "2009 WMG Me arrepiento (Video clip)",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/knm7_sN4cfA/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/knm7_sN4cfA/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/knm7_sN4cfA/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "Alex Ubago",
                    "liveBroadcastContent": "none",
                    "publishTime": "2009-12-14T11:35:01Z"
                }
            }
        ]
    },
    "status": 200,
    "statusText": "",
    "headers": {
        "cache-control": "private",
        "content-encoding": "gzip",
        "content-length": "1273",
        "content-type": "application/json; charset=UTF-8",
        "date": "Sun, 12 Jun 2022 17:51:50 GMT",
        "server": "scaffolding on HTTPServer2",
        "vary": "Origin, X-Origin, Referer"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "baseURL": "https://www.googleapis.com/youtube/v3",
        "params": {
            "part": "snippet",
            "type": "video",
            "maxResults": 5,
            "key": "KEY"
        },
        "q": "MKBHD",
        "method": "get",
        "url": "/search"
    },
    "request": {}
}

And another one with the term "Building":

{
    "data": {
        "kind": "youtube#searchListResponse",
        "etag": "8QF_NrI9lxk0tmSjS1yPRXHtIMk",
        "nextPageToken": "CAUQAA",
        "regionCode": "ES",
        "pageInfo": {
            "totalResults": 1000000,
            "resultsPerPage": 5
        },
        "items": [
            {
                "kind": "youtube#searchResult",
                "etag": "BGAtOg2raMag7uoUIEEocVBUUF8",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "KJvmdDBrXNU"
                },
                "snippet": {
                    "publishedAt": "2020-11-17T07:00:10Z",
                    "channelId": "UC-8Q-hLdECwQmaWNwXitYDw",
                    "title": "Katy Perry, Tiësto, Aitana - Resilient (Tiësto Remix) (Official #OpenToBetter Film)",
                    "description": "Katy Perry's new album \"Smile\" out now - http://katy.to/smileID Listen to “Resilient” (ft. Aitana) [Tiesto Remix] here ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/KJvmdDBrXNU/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/KJvmdDBrXNU/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/KJvmdDBrXNU/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "KatyPerryVEVO",
                    "liveBroadcastContent": "none",
                    "publishTime": "2020-11-17T07:00:10Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "reukPzR-cXyw-9tlM_Pii1aIT4c",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "FrOxVLuokyY"
                },
                "snippet": {
                    "publishedAt": "2022-03-25T00:13:59Z",
                    "channelId": "UC9TO_oo4c_LrOiKNaY6aysA",
                    "title": "Daddy Yankee x Myke Towers - Pasatiempo (Video Lyric)",
                    "description": "Daddy Yankee Ft. Myke Towers - Pasatiempo (Video Lyric) Suscríbete al canal: Subscribe to the channel: Sameas before ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/FrOxVLuokyY/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/FrOxVLuokyY/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/FrOxVLuokyY/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "Daddy Yankee",
                    "liveBroadcastContent": "none",
                    "publishTime": "2022-03-25T00:13:59Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "09oU9xnUNZ43GxuQRr9zk66cQMk",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "siJaiEqcCNo"
                },
                "snippet": {
                    "publishedAt": "2020-11-13T00:00:05Z",
                    "channelId": "UC-8Q-hLdECwQmaWNwXitYDw",
                    "title": "Katy Perry, Tiësto - Resilient (ft. Aitana) (Tiësto Remix) (Official Visualizer)",
                    "description": "Katy Perry's new album \"Smile\" out now - http://katy.to/smileID Listen to “Resilient” (ft. Aitana) [Tiesto Remix] here: ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/siJaiEqcCNo/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/siJaiEqcCNo/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/siJaiEqcCNo/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "KatyPerryVEVO",
                    "liveBroadcastContent": "none",
                    "publishTime": "2020-11-13T00:00:05Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "xhh4cWo_Tbt8b0oDTTChl9Ot4fY",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "PoMM05OTsj0"
                },
                "snippet": {
                    "publishedAt": "2021-09-23T22:00:11Z",
                    "channelId": "UCcGkH2WL3DuR0x8kWivNNvA",
                    "title": "Alex Ubago - A gritos de esperanza ft. Jesús Navarro (Videoclip Oficial)",
                    "description": "Videoclip oficial de la canción \"A gritos de esperanza\" de @Alex Ubago en colaboración con Jesús Navarro. Disponible en todas ...",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/PoMM05OTsj0/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/PoMM05OTsj0/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/PoMM05OTsj0/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "Alex Ubago",
                    "liveBroadcastContent": "none",
                    "publishTime": "2021-09-23T22:00:11Z"
                }
            },
            {
                "kind": "youtube#searchResult",
                "etag": "PzHDjevlrW1ePp_SuhIcxHXcsgE",
                "id": {
                    "kind": "youtube#video",
                    "videoId": "knm7_sN4cfA"
                },
                "snippet": {
                    "publishedAt": "2009-12-14T11:35:01Z",
                    "channelId": "UCcGkH2WL3DuR0x8kWivNNvA",
                    "title": "Alex Ubago - Me arrepiento (Video clip)",
                    "description": "2009 WMG Me arrepiento (Video clip)",
                    "thumbnails": {
                        "default": {
                            "url": "https://i.ytimg.com/vi/knm7_sN4cfA/default.jpg",
                            "width": 120,
                            "height": 90
                        },
                        "medium": {
                            "url": "https://i.ytimg.com/vi/knm7_sN4cfA/mqdefault.jpg",
                            "width": 320,
                            "height": 180
                        },
                        "high": {
                            "url": "https://i.ytimg.com/vi/knm7_sN4cfA/hqdefault.jpg",
                            "width": 480,
                            "height": 360
                        }
                    },
                    "channelTitle": "Alex Ubago",
                    "liveBroadcastContent": "none",
                    "publishTime": "2009-12-14T11:35:01Z"
                }
            }
        ]
    },
    "status": 200,
    "statusText": "",
    "headers": {
        "cache-control": "private",
        "content-encoding": "gzip",
        "content-length": "1273",
        "content-type": "application/json; charset=UTF-8",
        "date": "Sun, 12 Jun 2022 17:51:43 GMT",
        "server": "scaffolding on HTTPServer2",
        "vary": "Origin, X-Origin, Referer"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "baseURL": "https://www.googleapis.com/youtube/v3",
        "params": {
            "part": "snippet",
            "type": "video",
            "maxResults": 5,
            "key": "KEY"
        },
        "q": "Building",
        "method": "get",
        "url": "/search"
    },
    "request": {}
}

As you can see, no matter the term (q) I always get the same set of videos that look like a top something of music videos in my region...

Here's the code for the axios params:

import axios from 'axios';

const KEY = '-----KEY-----';

export default axios.create({
    baseURL: 'https://www.googleapis.com/youtube/v3',
    params: {
      part: 'snippet', 
      type: 'video',
      maxResults: 5,
      key: KEY
  }
});

as well as the request itself:

onTermSubmit = term => {
        return youtube.get('/search', { q: term })
            .then(res => {
                this.setState({ selectedVideo: null });
                console.log(res);
                this.setState({ videos: res.data.items });
            })
            .catch(err => console.log(err));
    };
2 Answers

There is one thing you're doing wrong. My assumption is

youtube = axios.create(...

Then you should add the parameters as below

onTermSubmit = term => {
        return youtube.get('/search', {params:{ q: term, ...otherParametters })
            .then(res => {
                this.setState({ selectedVideo: null });
                console.log(res);
                this.setState({ videos: res.data.items });
            })
            .catch(err => console.log(err));
    };

Notice params:{ q: term, ... }

Related