trpc/react-query render logic
I've made the attached diagram to try and explain the scenario, but for additional context, my issue is this:
I have a page that conditionally renders two main views. the editable view submits a form, after which I would like to render the opposite view, but with the new data.
currently, i'm invalidating on success, though it seems that the completion of invalidate doesn't ensure that my other component will have refetched its data yet. my idea would then be to block my readonly component on both loading AND fetching. the issue here is that toggling between views when there is not a form submission ends up showing a load state, presumably because isRefetching is true even if its fetching from cache.
im primarily wondering if there's a fundamental problem in where i have the data/handler ownership on the page. The code is here as well (ignore the ListEditor jsx for the most part, its a huge mess): https://github.com/jackbisceglia/p4p/blob/selections/src/pages/me.tsx
I have a page that conditionally renders two main views. the editable view submits a form, after which I would like to render the opposite view, but with the new data.
currently, i'm invalidating on success, though it seems that the completion of invalidate doesn't ensure that my other component will have refetched its data yet. my idea would then be to block my readonly component on both loading AND fetching. the issue here is that toggling between views when there is not a form submission ends up showing a load state, presumably because isRefetching is true even if its fetching from cache.
im primarily wondering if there's a fundamental problem in where i have the data/handler ownership on the page. The code is here as well (ignore the ListEditor jsx for the most part, its a huge mess): https://github.com/jackbisceglia/p4p/blob/selections/src/pages/me.tsx
