robust-apricot•2y ago

Invalidating resource does not put dataGrid into loading state

Hello! I'm implementing a DataGrid with ability to reorder rows. Every time table gets reordered I track that change and store it in memory(in state). And when user clicks "Save changes" I run a query using useCustomMutation to update the order on backend and then I call invalidate using useInvalidate for this particular resorce. Here I have 2 problems: 1. These two queries(reorder and invalidate) run in parallel and thus I don't see any changes in table, because invalidate resolves faster than reorder. These functions are not async, so I can't await mutation before calling invalidation. How can I do these things sequentially? 2. When I call invalidate I don't see my DataGrid applying any loading statusbar, or clearing it's state of rows. So, basically useDataGrid hook doesn't care if I call invalidate or not. It only reacts when new resource state is received from backend and updates the rows. How can I trigger useDataGrid to go to "loading" state using invalidate call? I want both these issues to be resolved without injecting any custom logic into JSX. By Custom Logic I mean writing a custom loading state, that would be changed when I call invalidation and then combining it with useDataGrid loading in JSX props. (May look like <DataGrid loading={dataGridProps.loading || myCustomLoading}/>). It looks bad and I don't want to bloat code with such things if possible. Also attaching a screenshot for better understanding. I reordered rows(2 and 3), a button appeared, I clicked "Save changes", 2 requests started simultaneously, but the "/order" finished later, so my invalidation happened earlier(which did not reflect any results). That's why after requests finished it keeps showing "0, 1, 3, 2, 4". It should have changed to "0, 1, 2, 3, 4"(backend tweaks this ID's to put them in correct order).