Your code contains a misunderstanding related to the variable name promises.
The function buildAudioFetchRequests does not return a promise, but rather a tuple consisting of a key and a promise. When you await this value, it returns the same tuple because await does not inspect the contents of objects or arrays.
Considering the return types in your code, it appears that you intend to await all the promises returned as part of the tuple. You can achieve this with the following approach:
const createPromises = async (utteranceObject: Array<string[]>):
Promise<Array<[string, Blob]>> => {
const requests = utteranceObject.map((keyValue) => {
return buildAudioFetchRequests(keyValue[0], keyValue[1]);
});
const promises = requests.map((req) => req[1]);
return Promise.all(promises);
};
const buildAudioFetchRequests = (key: string, url: string):
[string, Promise<[string, Blob]>] => {
return [key, useAuthenticatedFetch(url, { initialCache: false })];
};
In response to Bergi's comment:
Why bother returning the key in a tuple from buildAudioFetchRequests if it is not being used at all?
If you are indeed not utilizing the key from the return value of that function anywhere, you could simplify the code like this:
const createPromises = async (utteranceObject: Array<string[]>):
Promise<Array<[string, Blob]>> => {
const promises = utteranceObject.map((keyValue) => {
return buildAudioFetchRequests(keyValue[0], keyValue[1]);
});
return Promise.all(promises);
};
const buildAudioFetchRequests = (key: string, url: string):
// Adjust the return type here
Promise<[string, Blob]> => {
// Update the return value accordingly
return useAuthenticatedFetch(url, { initialCache: false });
};