Getting card cover image with the Trello REST API with batching - api

Question

I'm trying to get the cover image links for all cards from a board but the boards endpoint is only providing an attachment id for the cover image. That might be fine but I also don't see how to use that id for getting the full image link. This is my request:
${TRELLO_API_ROOT}/boards/${boardId}?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&cards=all&card_customFieldItems=true&attachments=true&attachment_fields=all
And this returns all of the cards and cover image details for each card but the information does not seem useful for getting the full image path:
cards: [{
cover: {
brightness: "light",
color: null,
idAttachment: "5eee7680d7b0295f6c52fc22",
idUploadedBackground: null,
size: "normal
}
}]
I have considered that I might need to make a request to the cards endpoint for each individual card using the batch process but that process is limited to 10 requests. A board could easily have more than 10 cards so this doesn't seem like a good solution.
Is it true that you need to send a request to each individual card in order to get the cover images?
EDIT: The only way that I see to do this is to make separate requests for each card against the attachments endpoint. This has the potential to be a lot of requests though:
const requests = data.cards.filter((item) => {
return item.cover.idAttachment;
}).map((card) => {
return fetch(`${TRELLO_API_ROOT}/cards/${card.id}/attachments/${card.cover.idAttachment}?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}`)
})
Promise.all(requests)
.then(responses => {
return responses;
})
.then(responses => Promise.all(responses.map(res => res.json())))
.then(attachments => {
return attachments;
});

Answer 1

Answering my own question because I don't believe there is any other solution than to send an individual request for each card. But we can at least improve on it by using batch.
And one clarification; you only need to request the cover image attachment url if the card has been assigned an uploaded image as the cover. If the card cover is one of the available Unplashed images that Trello is offering now, you'll get that images url in the regular boards endpoint request as a sharedSourceUrl like this:
{
brightness: "light",
color: null,
edgeColor: "#776e5d",
idAttachment: null,
idUploadedBackground: "5efe2d6c4292a74f4c4051e0",
scaled: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
sharedSourceUrl: "https://images.unsplash.com/photo-1593435220813-8e60f12e947a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjcwNjZ9&w=2560&h=2048&q=90",
size: "normal"
}
I don't know if it's an oversite that they don't do the same thing automatically for uploaded image urls but there doesn't appear to be any other way to get the card image if it's an upload.
So using the batch process, you'll need to make sure to only send 10 urls at a time. This is simple enough with a standard loop to build out the arrays. Then we can queue up the batch requests into a Promise.all and handle the response by assigning that cover url to the corresponding card. We can reduce are requests significantly this way but it would still have been nice to have the cover url available during the first boards fetch.
fetch(`${TRELLO_API_ROOT}/boards/${boardId}?cards=visible&card_customFieldItems=true&key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&attachments=true&attachment_fields=all`)
.then(response => response.json())
.then((data) => {
const cardsWithCovers = data.cards.filter((item, i) => {
return item.cover.idAttachment;
});
// Creating our batched request array for fetching cover urls.
const batchedUrls = [];
let batch = [];
// Creating batches.
for (let i = 0; i < cardsWithCovers.length; i++) {
// Important here not to append the url root, api key, or token values. That's how the batch endpoint wants it.
const url = `/cards/${cardsWithCovers[i].id}/attachments/${cardsWithCovers[i].cover.idAttachment}`;
batch.push(url);
// If we have our max 10 request urls, or it's the last item, push the request url group and reset batch array.
if (batch.length === 10 || i === cardsWithCovers.length - 1) {
batchedUrls.push(batch);
batch = [];
}
}
const requests = batchedUrls.map((urls) => {
return fetch(`${TRELLO_API_ROOT}/batch?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&urls=${urls}`)
});
Promise.all(requests)
.then(responses => Promise.all(responses.map(res => res.json())))
.then(batchedData => {
// Combine the batched array responses into a single array.
const mergedCardsWithCovers = [].concat.apply([], batchedData);
data.cards.forEach((card) => {
// Finding the card cover image url and adding it to the card.
const cover = mergedCardsWithCovers.find((cardWithCover) => {
return card.cover.idAttachment === cardWithCover[200].id;
});
if (cover) card.cover.url = cover[200].url;
});
})
})