Por alguna razón axios-cache-adapter no almacena en caché las solicitudes GET para descargas de archivos, lo que creo que se debe a la configuración de responseType: 'blob' (ya que no tengo problemas de almacenamiento en caché en otras solicitudes que no requieren que este campo se establezca como such) que se requiere para que axios genere la url src (según esta respuesta ):
src: URL.createObjectURL(nuevo blob([respuesta.datos])),
La configuración de mi adaptador es la siguiente:
// set axios defaults axios.defaults.headers.common = { 'Authorization': `Bearer ${accessToken}`, 'Content-Type': 'application/json' }; const configureAxios = async () => { await localforage.defineDriver(memoryDriver); const forageStore = localforage.createInstance({ driver: [ localforage.INDEXEDDB, localforage.LOCALSTORAGE, memoryDriver._driver ], name: 'my-cache' }); return setup({ // `axios-cache-adapter` options cache: { maxAge: 15 * 60 * 1000, exclude: { query: false }, store: forageStore, } }); }; // call this function in JSX Component to download file export const downloadFile = async (fileId) => { const api = await configureAxios(); const response = await api.get(`api/download/${fileId}`, { responseType: 'blob', }); return response.data; // returns file data };Su ayuda sería muy apreciada.
@D-Money me indicó la dirección correcta. Entonces, básicamente axios-cache-adapter v3 soluciona el problema de no almacenar en caché las solicitudes con responseType blob o arraybuffers , sin embargo, actualmente solo está disponible en versión beta, por lo que tendrá que instalarlo de la siguiente manera en el ínterin:
npm install axios-cache-adapter@beta
Luego, tendrá que hacer un ligero ajuste configurando readHeaders: false, en las axios-cache-adapter en setup y, además, mover la configuración predeterminada de axios directamente a setup , lo que en mi caso da como resultado los siguientes cambios netos:
const configureAxios = async () => { await localforage.defineDriver(memoryDriver); const forageStore = localforage.createInstance({ driver: [ localforage.INDEXEDDB, localforage.LOCALSTORAGE, memoryDriver._driver ], name: 'my-cache' }); return setup({ // Options passed to `axios.create()` method headers: { 'Authorization': `Bearer ${accessToken}`, 'Content-Type': 'application/json' }, // `axios-cache-adapter` options cache: { readHeaders: false, maxAge: 15 * 60 * 1000, exclude: { query: false }, store: forageStore, } }); }; // call this function in JSX Component to download file export const downloadFile = async (fileId) => { const api = await configureAxios(); const response = await api.get(`api/download/${fileId}`, { responseType: 'blob', }); return response.data; // returns file data };