0

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) Resultado de http://localhost:8080/editores

Resultado del CRUD (front)

3
  • 4
    Probaste a desactivar la caché en front? Pasándole al fetch como segundo parámetro algo así: {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})
    – Benito-B
    Commented el 4 ago. 2023 a las 11:58
  • Muchas gracias, funciono
    – Camila
    Commented el 4 ago. 2023 a las 12:19
  • @Benito, debieras publicar una respuesta con tu solución.
    – jachguate
    Commented el 5 ago. 2023 a las 18:03

1 respuesta 1

0

El problema que estás enfrentando parece estar relacionado con la caché del navegador. Cuando realizas una actualización a través de una solicitud (por ejemplo, un POST o PUT) en el servidor, la caché del navegador no se actualiza automáticamente y, por lo tanto, la siguiente solicitud GET desde el cliente puede recuperar los datos almacenados en la caché en lugar de obtener los datos más recientes del servidor.

Una solución para evitar este problema es agregar un parámetro único a la URL de la solicitud GET para evitar que el navegador use la caché. Esto se puede hacer de varias maneras. Una de ellas es agregar un timestamp (marca de tiempo) como parámetro a la URL de la solicitud GET. Esto asegurará que cada solicitud sea única y no se cachee en el navegador.

Modifica la función getEditores en el frontend para incluir un parámetro de marca de tiempo en la URL de la solicitud GET:

export async function getEditores() {
  try {
    // Agregar un parámetro de marca de tiempo a la URL para evitar la caché del navegador
    const timestamp = new Date().getTime();
    const response = await fetch(`http://localhost:8080/editores?timestamp=${timestamp}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('Error al obtener los editores:', error.message);
  }
}

Con esto, cada vez que llames a la función getEditores, se agregará un parámetro de marca de tiempo único a la URL, lo que evitará que el navegador utilice la caché y garantizará que obtengas los datos más recientes del servidor.

Además, ten en cuenta que en la función useEffect, no es necesario que incluyas [editores] como una dependencia. En su lugar, puedes dejarlo vacío ([]) para que la solicitud GET solo se realice una vez al montar el componente.

useEffect(() => {
  // Obtener los editores
  getEditores().then((data) => {
    setEditores(data);
  });
}, []);
1
  • 1
    Para qué "engañar" al navegador para no responda con la caché pudiendo evitar que se cachee la llamada directamente?? No quieres usar la caché, setea los headers para que no se cachee la llamada, para eso están :)
    – Benito-B
    Commented el 4 ago. 2023 a las 20:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.