A minimalistic ClojureScript interface to React.js
p-himik 2021-05-29T19:56:05.046Z

Most likely not a Reagent question per se, but more of a browser cache one. Not entirely sure. I have an audio component on my web page with 3 states: • Has audio provided by :src • Has no audio • Has audio provided by [:source ...] that uses .createObjectURL to serve a file from [:input {:type :file} ...] The workflow is such that a user can remove the audio on the server with a separate "Remove" button and then upload a new file that will be available on the webpage before the user hits "Save" (that's what :source is used for). The :src depends on the outer component - the audio data has no ID by itself. So the URL is unchanged when the data is replaced. The issue is that when I add :source and delete it, the browser does not re-request the audio since it doesn't have a reason to do so, I think. Same happens if I remove and add the same :src back. The solution on the path of least resistance is to add a dummy query parameter, like ?_=%current-timestamp% that will be replaced on each component re-render. Seems like I can also make an AJAX request by myself to force the browser to load the new data from the old URL. Are these the only solutions, is there something better?

Lu 2021-05-30T10:50:04.048100Z

You can have a dummy loader component that loads for say 200ms and allows your component to remount and redo the on mount logic ?

p-himik 2021-05-30T10:53:37.048300Z

Sounds fragile, although to be honest I haven't given it enough thought. For now, I settled on tightening up the interaction between the browser and the server by making that dummy _ query parameter on the server, based on the the audio data itself.


you can use a react-key to force remount

p-himik 2021-05-29T19:59:34.046400Z

And what would the key be?

p-himik 2021-05-29T21:18:41.046600Z

Ah, of course - using a dummy URL query parameter prevents all cache from working. Not great.