Optimistic updating and routing #2221
Replies: 2 comments 1 reply
-
I've done things like this where I wrap a cache invalidation in a setTimeout to give the backend time to catch up. But in your case, perhaps you want to setup some sort of refetchInterval on the new page, ignore the 404 (not show an alert/error) and show a spinner/animation while its retrying and waiting for the success to come back. Maybe also add a page transition to slow it down a bit. We have a few slow mutations (such as hitting a 3rd party api -ie billing) in our app and we show animations to help keep their interest and make it not feel like its broken. |
Beta Was this translation helpful? Give feedback.
-
hmm, but redirecting to the new page and showing a loading spinner until that data is there is also kinda sluggish, isn't it? If the data isn't there, it isn't there 🤷 what you can do is kick off the useQuery on the new page, and implement a custom retry function that retries for as long as you get 404, or maybe return a custom error code in the case where the mutation is not yet finished if you can. This will mean that the query will be in But also with this approach, you'd show a loading spinner while that query is loading. I'm not really sure how this is better than showing a spinner on the "old page" while the mutation is still running. The advantage here is that you "know" when it's done and then the redirect will work, while any "retry" or "interval" mechanism is dependent on how often you trigger the re-fetch. E.g. if you do it every 5 seconds, you might get a 404 and after 0.5 seconds your mutation would be finished, so you're unnecessarily waiting another 4.5 seconds... |
Beta Was this translation helpful? Give feedback.
-
I have a question that I can not figure out. I'm building an app that creates dashboards. When I click a button on the toolbar this creates a new board using a mutation that sends the post request (with partial data) to the server. Then using react-router I route to the page for that new board. The problem is the write on the server-side is not done by the time the useQuery on the new board page is called so I get a 404. I don't want to wait till onSuccess to route to the board page because it feels sluggish. I have tried using setQueryData to manually add the limited board information that I have during onMutate and then routing but the data is then stale so the board page tries to fetch it anyway. I got around this by setting the stale time higher but this feels hacky also I still haven't handled any potential server errors. Is there a better way to do this kind of optimistic update and routing? I feel like I have a decent handle on the basic optimistic updating(I'm using it successfully in other areas) but adding the routing component which then has a new useQuery request is causing me some problems.
I would be grateful for any suggestions,
Thanks
Dan
Beta Was this translation helpful? Give feedback.
All reactions