Many questions regarding this issue focus on having the wrong key, but I believe my key is correct. Now I am confused whether the problem lies with the YouTube API or the fetch() method.
In simple terms, I am sending the following request:
export function loadVideo() {
fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&order=relevance&q=WOODYGUTHRIE&topicId=%2Fm%2F04rlf&type=video&videoCaption=any&key=MYKEY")
.then(function (response) {
console.log(queryString);
console.log(response);
})
.catch(err => console.log(err));
console.log(videoList);
}
Upon reviewing my logs, it seems that the query string successfully loads the desired JSON in my browser. When I log the response, I receive the following information:
Response {type: "cors", url: "https://www.googleapis.com/youtube/v3/search?part=…n=any&key=MYKEY", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&order=relevance&q=WOODYGUTHRIE&topicId=%2Fm%2F04rlf&type=video&videoCaption=any&key=MYKEY"
__proto__: Response
However, no matter how I access it - whether through response.items, response.body.items, or response.data.items - I always get undefined. Therefore, I am currently struggling to troubleshoot and find a solution to this issue.
What am I missing?