I'm trying to make an api call ( a get ) to download a document.
My problem is that when I make this api call I receive error:
TypeError: Cannot read properties of undefined (reading 'payload')
const printPin = event => {
event.preventDefault()
//....
props.printedPin(scePersonaEntity.perCod, activateAlert)
}
my reducer:
export const printedPin= (id, callback) => {
const requestUrl = `${apiUrl}/${id}/printpin`
fetch(requestUrl)
.then((response) => {
response
.blob()
.then(blob => {
console.log("blob ", blob)
if (blob.type === 'application/problem+json') {
callback();
}
else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'pin.pdf';
a.click();
}
})
.catch(err => console.log(err))
})
}
In your opinion how can I fix this error? Thank you.
I think your .then chaining is incorrect.
Could you try this once?
export const printedPin = (id, callback) => {
const requestUrl = `${apiUrl}/${id}/printpin`
fetch(requestUrl)
.then((response) => response.blob()).then(blob => {
console.log("blob ", blob)
if (blob.type === 'application/problem+json') {
callback();
}
else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'pin.pdf';
a.click();
}
})
.catch(err => console.log(err))
}
Your first then will return response.blob() and next then will handle the response of the previous one.