es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Herramienta Redux Toolkit para consultas: invalidando datos antiguos.

02 Aug, 2023 Programación

Tengo un componente MediaCard, que contiene un elemento img con una URL que incluye un token. Este token debe ser requerido primero para obtener la imagen. El inconveniente aquí es que el token expirará en 30 segundos. Sería algo como esto:

const MediaCard = () => {

// Esto debería volver a obtener el token cada vez que se monte un nuevo componente
// y hayan pasado 30 segundos desde la última obtención

const { data: token, error: tokenError, isLoading: tokenIsLoading } = useGetTokenQuery(undefined, { refetchOnMountOrArgChange: 30 });

if (tokenError) return 'Error';

if (tokenIsLoading) return 'Loading skeleton';

return (
   <img url={`/url/${token}/image1.jpg`}
)
}

Esto funcionaba bien cuando solo tenía un componente MediaCard. El problema comenzó cuando monté el primer MediaCard, cargué el token y luego mostré la imagen. Luego, si dejaba pasar 30 segundos e intentaba montar un nuevo MediaCard, el hook comenzaba a volver a obtener el token, pero mantenía los datos antiguos. Esto causaba dos problemas diferentes:

  1. Cuando se montaba el nuevo componente, como teníamos un token expirado como datos, la imagen no se cargaba correctamente. Luego, después de recibir el nuevo token, la imagen se volvía a renderizar y funcionaba.

  2. Una vez que se recibía el nuevo token, todas las imágenes montadas previamente se volvían a renderizar. Me gustaría que una vez que la imagen se renderizara con un token válido, se mantuviera de esa manera y no se volviera a renderizar.

Tal vez la solución no tenga que ver con RTK Query sino con React en sí mismo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una solución para evitar que el componente MediaCard se vuelva a renderizar después de recibir un nuevo token es utilizar el hook useMemo de React. Podemos crear una versión memorizada del componente img envolviéndolo en un hook useMemo con el token como dependencia. De esta manera, el componente img solo se volverá a renderizar si el token cambia.

    Aquí hay un ejemplo de implementación:

    const MediaCard = () => {

  const { data: token, error: tokenError, isLoading: tokenIsLoading } = useGetTokenQuery(undefined, { refetchOnMountOrArgChange: 30 });

  if (tokenError) return 'Error';

  if (tokenIsLoading) return 'Loading skeleton';

  const imgUrl = useMemo(() => `/url/${token}/image1.jpg`, [token]);

  return (
    <img src="{imgUrl}">
  );
}

    Con esta implementación, el componente img solo se volverá a renderizar si cambia el valor del token. Las imágenes anteriores que se renderizaron con un token válido permanecerán tal como están y no se volverán a renderizar después de recibir un nuevo token.

Comments are closed.