How to update React UI elements after updating profile picture?
Trying to:
update avatar in Navbar
display uploaded picture in the same component, from which making upload
Currently have tried adding withApollo() and use client.refetchObservableQueries() and client.resetStore() neither of these work, have to manually refresh the page - any suggestions?
Here is my current function: *using React-Dropzone to handle receiving
You can simply use the React component’s internal state to store the fileUrl you receive from Cloudinary, by adding a call to setState() around the same time you call Meteor.users.update(). Your display component would then read either from the user’s profile or its own state to display the picture.
If you want to leverage Meteor’s reactivity to achieve this, well, I never used Apollo, but with regular Meteor, this could be achieved by using the withTracker() HOC, tracking the user profile and passing down the url as props to your uploading/displaying component.
Thanks for your reply, the state of avatar component (and thus, the fileURL), however, is in a different component, way up in the tree, if this makes sense … (?)
Makes perfect sense, yes. The simplest solution, although quite cumbersome, would be to pass a function that set the state of your display component as a prop all the way down to the uploading component, and call that instead of setState() when receiving the fileUrl.
At this point, it might be cleaner to use Meteor’s reactivity as I described in my second solution, but I have no idea how to implement that with apollo…