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).![No description](https://cdn.answeroverflow.com/1062412321890238556/telegram-cloud-photo-size-2-5325879277083805294-y.jpg)
21 Replies
Hey @metammodern 👋,
1. You can use onSuccess property of useCustomMutation hook. https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/#usage
2. Can you create an issue? We'll fix it soon ⚡️
I hope it helps you 🍻
useCustomMutation | refine
useCustomMutation is a modified version of react-query's useMutation for custom mutations.
robust-apricot•2y ago
Amazing, @Omer thanks, onSuccess will come in handy.
For the second one: is it actually a bug? If so, is the suggested workaround with custom logic fine for now?
You are welcome 🚀 I think you can use isFetching property for loading state
const { tableQueryResult: { isFetching } } = useDataGrid();
robust-apricot•2y ago
Alright, I'll try it later, thanks. Should I then create an issue anyway?
bug could be here https://github.com/refinedev/refine/blob/next/packages/mui/src/hooks/useDataGrid/index.ts#L310
GitHub
refine/index.ts at next · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/index.ts at next · refinedev/refine
probably isFetching will work
that would be great so we can discuss it with the Core team
robust-apricot•2y ago
Sure, I'll do it later or tomorrow. Thanks for the great product (and for Bayraktars✌️😄)
robust-apricot•2y ago
Hi again. It worked fine, thank you. I also used
isLoading
property of useCustomMutation
. Now the only thing left is to make loading process more visible. Currently I use a linearProgress as overlay(https://mui.com/x/react-data-grid/components/#loading-overlay), but it's think and not that pretty as I'd expect. Maybe you know some way in MUI to make DataGrid gray and uninteractive?
Another issue that I have is that LinearProgress is not visible behind cells with background, it's under that cell(see screenshot). But that's probably a question to MUI team)Data Grid - Components - MUI X
The grid is highly customizable. Override components using the components prop.
![No description](https://cdn.answeroverflow.com/1062457864083484672/image.png)
robust-apricot•2y ago
If anyone interested: I've made it so that when loading state is ON we pass empty array to rows props. This way no overly is happening and it's obvious that something is loading
Thank you for the update. What exactly does this look like? 👀
robust-apricot•2y ago
@Omer It looks like this. However, I found another way, although I won't have a linear progress then, because with linear progress there is a bug that I explained. You can see it here: https://github.com/mui/mui-x/issues/5538#issuecomment-1378732781
So I just omit using linearprogress and get fancy result with standard loading including grey overlay)
GitHub
Grid loading overlay is rendered behind the contents · Issue #5538 ...
Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 If I render a grid with both rows and loading: true, the overlay is rendered behind...
![No description](https://cdn.answeroverflow.com/1062721799462338591/image.png)
robust-apricot•2y ago
See, now loading is circular, but table is overlayed with grey). Which is exactly what I need regardless of loading type
![No description](https://cdn.answeroverflow.com/1062722159232962682/image.png)
Strange but it seems to work 👀
robust-apricot•2y ago
yep
robust-apricot•2y ago
@Omer check this response though: https://github.com/mui/mui-x/issues/5538#issuecomment-1378774045
it's fixed in v6.
Any info when refine-mui gets an update to v5 at least? It's at 3 now
GitHub
Grid loading overlay is rendered behind the contents · Issue #5538 ...
Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 If I render a grid with both rows and loading: true, the overlay is rendered behind...