Estoy trabajando con un sitio web que utiliza React.js en la parte del cliente. Node.js y MySQL en el server. Tengo una parte que tiene un CRUD y controla secciones en la página. Mi problema es que la funcion del front que realiza el fetch GET se realiza pero con los datos viejos. Es decir, si hago una actualización el fetch no tira error, se realiza correctamente pero con los datos sin actualizar. Estaba todo funcionando bien incluso con otras solicitudes (POST, PUT) funciona. Por otro lado, cuando accedo al endpoint http://localhost:8080/editores, por ejemplo, los datos están actualizados, así que el problema está en el fetch que hago en la función del front. Otro dato a tener en cuenta es que cuando cambio el endPoint, el fetch realiza el GET con los datos actualizados.
/**
* @route GET /editores
* @desc Obtiene todos los editores
* @returns {Object} Editores
*/
app.get('/editores', async (req, res) => {
try {
const response = await getAll('editores');
return res.status(200).send(response);
} catch (e) {
console.log(e.message);
}
});
Endpoint - getAll es una función que selecciona todo de la tabla dada.
/**
* @async
* @function getEditores
* @desc Obtiene la lista de editores mediante una solicitud GET al servidor
* @returns {Promise} Promesa que se resuelve con los datos de los editores
*/
export async function getEditores() {
try {
const response = await fetch(`http://localhost:8080/editores`);
const data = await response.json();
return data;
} catch (error) {
console.log('Error al obtener los editores:', error.message);
}
}
Función del front
const [editores, setEditores] = useState([]);
useEffect(() => {
// Obtener los editores
getEditores().then((data) => {
setEditores(data);
});
}, [editores]);
Así obtengo los datos en mi componente de React
Diferencias entre el resultado de http://localhost:8080/editores y el resultado del CRUD (front)
{headers: {"cache-control": "no-cache", "pragma": "no-cache"}}
O mejor aún, creando un objeto headers (const headers = new Headers(); headers.append('pragma', 'no-cache'); headers.append('cache-control', 'no-cache');
) y pasándoselo:fetch(URL, {headers})