Why does my fetch function return undefined? [duplicate]

Question

I'm making a chrome extension where I'm calling the youtube API and using fetch() to do so. I don't understand why I'm getting an undefined variable when I call the function. Here is where I'm calling the function;

document.querySelector("[type=button]").addEventListener("click", function() {
    //console.log("this was clicked");
    let videoId = document.getElementById('vidUrl').value;
    videoId = videoId.substring(videoId.indexOf('=') + 1);
    console.log(videoId);
    //chrome.runtime.sendMessage({ msg: "startFunc", vidId: videoId});
    let request = addToQueue(videoId);
    console.log(request);
    console.log(request.snippet.title);
    let table = document.querySelector(".table");
    let row = table.insertRow(table.rows.length);
    let title = row.insertCell(0);
    let author = row.insertCell(1);
    title.innerHTML = request.Data.snippet.title;
    author.innerHTML = request.Data.snippet.videoOwnerChannelTitle;
})

and this is the function itself;

function addToQueue(vidId){
    chrome.identity.getAuthToken({ interactive: true }, function (token) {
      //console.log(token);      
      let fetchString = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=xxxxxxxxxxxxxxxxxx'
      let post = 
      {
        "part": [
          "snippet"
        ],
        "id": "UC0E5pDp_c2riLV4UhEgynKA",
          "snippet": {
            "playlistId": "PLu4fFFN_062GzqARIz3gnERiJ8M4GbRcL",
            "position": 1,
            "resourceId": {
              "kind": "youtube#video",
              "videoId": vidId
            }
        }
      }
      let fetchOptions = {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(post),
      }
      fetch(fetchString,fetchOptions)
        .then((response) => response.json())
        .then(function (data) {
          console.log(data);
          //console.log(typeof data);
          //chrome.runtime.sendMessage({Data : data});
          return data;
      });
    })
  }

I'm fairly new to javascript and chrome extensions so please forgive me if this is something obvious.

Answer 1

The issue here is that you not returning anything from the addToQueue function. This will always return undefined. The return statement you are using returns from the callback, but not the function itself.

Update your method and put a return in front of the fetch call, like this:

async function addToQueue(vidId){
    return chrome.identity.getAuthToken({ interactive: true }, async function (token) {
      //console.log(token);      
      let fetchString = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=xxxxxxxxxxxxxxxxxx'
      let post = 
      {
        "part": [
          "snippet"
        ],
        "id": "UC0E5pDp_c2riLV4UhEgynKA",
          "snippet": {
            "playlistId": "PLu4fFFN_062GzqARIz3gnERiJ8M4GbRcL",
            "position": 1,
            "resourceId": {
              "kind": "youtube#video",
              "videoId": vidId
            }
        }
      }
      let fetchOptions = {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(post),
      }
      const response = await fetch(fetchString,fetchOptions)
      return await response.json()
    })
  }

When calling this method the async/await you will need to update your event listener function to be async

document.querySelector("[type=button]").addEventListener("click", async function() {
    //console.log("this was clicked");
    let videoId = document.getElementById('vidUrl').value;
    videoId = videoId.substring(videoId.indexOf('=') + 1);
    console.log(videoId);
    //chrome.runtime.sendMessage({ msg: "startFunc", vidId: videoId});
    let request = await addToQueue(videoId);
    console.log(request);
    console.log(request.snippet.title);
    let table = document.querySelector(".table");
    let row = table.insertRow(table.rows.length);
    let title = row.insertCell(0);
    let author = row.insertCell(1);
    title.innerHTML = request.Data.snippet.title;
    author.innerHTML = request.Data.snippet.videoOwnerChannelTitle;
})

Also, I have used the new async/await syntax after discussing with OP in comments