Hope you can help me here this is driving me crazy.
I have a function/route controller in my backend that gets an instagram profile pic:
app.get('/api/instagram/getProfilePic', upload.none(), async (req, res) => {
console.log('/api/instagram/getProfilePic');
console.log(req.query.username);
try {
const username = req.query.username;
...
I call that function/route controller from this function in my frontend:
export const getInstagramProfilePic = async (username) => {
const cacheName = `ig-profile-pic-${username}`;
const url = `/api/instagram/getProfilePic?username=${username}`;
const cachedResponse = await caches.match(url);
if (cachedResponse) {
console.log('La imagen está en caché');
return cachedResponse.url;
}
console.log('La imagen debe cargarse desde la red');
// The execution never reachs this line.
const response = await fetch(url);
const responseClone = response.clone();
const blob = await response.blob();
caches.open(cacheName).then((cache) => cache.put(url, responseClone));
return URL.createObjectURL(blob);
};
The thing is that the code never gets to the line where I make the call to the backend which would be this one:
const response = await fetch(url);
Cause it always gets into the if (cachedResponse) section as you can see here:
But even though it never reachs that line I can see in my backend that the execution is going into the route controller /api/instagram/getProfilePic
In my code that link is used just in one place and according to the debugger it never reachs that line:
The point is that I don’t want to use the backend if the image is in my cache so why is going into the backend when the image is in cache already?
Thanks in advance