Estoy usando React Query para capturar todas las URL (fotos) de CDN cargadas desde la base de datos y mostrarlas correctamente cuando el usuario navega al componente Gallery.js .

Sin embargo, cada vez que un usuario intente cargar una foto, deberá actualizar la página para que se muestre la foto cargada.

A continuación se muestra uno de mis muchos intentos fallidos ya que me he topado con una pared.

¿Cómo puedo hacer que la foto que han subido se muestre después de una carga exitosa?

Gallery.js

 // Newly uploaded photo const [newlyUploadedUrl, setNewlyUploadedUrl] = useState(""); const [newlyUploadedFlag, setNewlyUploadedFlag] = useState(false); const fileUpload = () => { const url = 'http://localhost/api/file-upload'; let formData = new FormData(); let imagefile = document.querySelector('#file'); formData.append("image", imagefile.files[0]); const headers = { "Accept": 'application/json', "Authorization": `Bearer ${authToken}` } axios.post(url, formData, {headers}) .then(resp => { let photoUrl = resp.data.url; setNewlyUploadedFlag(true); setNewlyUploadedUrl(photoUrl); }).catch(error => { console.log(error); }); } async function fetchUploads() { const headers = { "Accept": 'application/json', "Authorization": `Bearer ${authToken}` }; const {data} = await axios.get('http://localhost/api/get-user-uploads-data', {headers}); return data; } const { data } = useQuery('uploads', fetchUploads); <div className="main"> <ul className="cards"> { data.map((photos) => { return( <> <Grid newlyUploadedFlag={newlyUploadedFlag} newlyUploadedUrl={newlyUploadedUrl} src={photos.url} /> </> ); }) } </ul> </div>

Aquí está Grid.js :

 const Grid = (props) => { return ( <> <img src={!props.newlyUploadedFlag ? props.src : props.newlyUploadedUrl} alt="Photo" className="gallery-img" /> <span style={{display: 'none'}}>{props.newlyUploadedFlag}</span> <span style={{display: 'none'}}>{props.newlyUploadedUrl}</span> </> ); }