Clojurians Log v2
reagent
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?
You can have a dummy loader component that loads for say 200ms and allows your component to remount and redo the on mount logic ?
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
And what would the key be?
Ah, of course - using a dummy URL query parameter prevents all cache from working. Not great.