adverse-sapphire
adverse-sapphireβ€’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).
No description
21 Replies
Omer
Omerβ€’2y ago
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.
adverse-sapphire
adverse-sapphireβ€’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?
Omer
Omerβ€’2y ago
You are welcome πŸš€ I think you can use isFetching property for loading state const { tableQueryResult: { isFetching } } = useDataGrid();
adverse-sapphire
adverse-sapphireβ€’2y ago
Alright, I'll try it later, thanks. Should I then create an issue anyway?
Omer
Omerβ€’2y ago
GitHub
refine/index.ts at next Β· refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/index.ts at next Β· refinedev/refine
Omer
Omerβ€’2y ago
probably isFetching will work that would be great so we can discuss it with the Core team
adverse-sapphire
adverse-sapphireβ€’2y ago
Sure, I'll do it later or tomorrow. Thanks for the great product (and for BayraktarsβœŒοΈπŸ˜„)
adverse-sapphire
adverse-sapphireβ€’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
adverse-sapphire
adverse-sapphireβ€’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
Omer
Omerβ€’2y ago
Thank you for the update. What exactly does this look like? πŸ‘€
adverse-sapphire
adverse-sapphireβ€’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
adverse-sapphire
adverse-sapphireβ€’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
Omer
Omerβ€’2y ago
Strange but it seems to work πŸ‘€
adverse-sapphire
adverse-sapphireβ€’2y ago
yep
adverse-sapphire
adverse-sapphireβ€’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...
Omer
Omerβ€’2y ago
No, @pankod/refine-mui@3 already depends on @mui/material@5. Being version 3 is related to refine's internal version system. https://github.com/refinedev/refine/blob/next/packages/mui/package.json#L51
GitHub
refine/package.json at next Β· refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/package.json at next Β· refinedev/refine
adverse-sapphire
adverse-sapphireβ€’2y ago
Oooh, I got it now. Needed some time to understand what you wrote)) Alright then, that's great. Thanks a lot, feel free to close the ticket if you don't need it) I'm good with it now
Omer
Omerβ€’2y ago
Thank you! πŸ’―
adverse-sapphire
adverse-sapphireβ€’2y ago
@Omer hi again) I did not mean to close the ticket in Github, I meant this conversation in Discord. On Github there's no need to close the ticket, cause the fix is not applied(and it would be good to reference that issue in a PR and keep it open). Sorry for confusion
Omer
Omerβ€’2y ago
Sorry, can you reopen the issue? ⚑️
adverse-sapphire
adverse-sapphireβ€’2y ago
@Omer you mean create the same one from scratch? Cause I don't have access to reopen functionality