Antd <Table> not refreshing when record deleted with <DeleteButton> action.
I have an ant design <Table> component and one of the columns has a <DeleteButton> that deletes the associated row. The delete is functioning correctly, however, the table is not refreshing automatically on the interface. I have another interface elsewhere in the application where this same thing is being done and it refreshes the UI without issue. The only difference seems to be in the call to useTable. In the case that works, I'm not specifying the 'resources' property explicitly, letting it get set from resources.tsx. In the other, I'm explicitly setting the resource property because it differs from the definition in resources.tsx. Would that cause the table to not automatically refresh on delete? And if so, why?
2 Replies
Hi @Hypnotic Meat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, explicitly setting a different resource name in
useTable
compared to what's used in the delete operation can cause the table to not automatically refresh after deletion. This is a known behavior in refine.
Why This Happens
When you use different resource names between your table and delete operation, the automatic invalidation mechanism doesn't work properly. This happens because refine's invalidation system relies on matching resource names to determine which queries to refresh.
As mentioned in a GitHub issue:
The issue generally arises because if the resource value used byGitHub Issue #5125 Solutions You have a few options to fix this: 1. UseuseTable
doesn't match the resource value of theuseDelete
hook, then the user has to manage the invalidation.
useInvalidate
hook
You can manually trigger invalidation after deletion by using the onSuccess
callback of the DeleteButton
:
This approach was suggested in GitHub Issue #4655 for a similar problem.
2. Use tableQueryResult.refetch()
Another approach is to use the refetch
method from the table query result:
This method is mentioned in GitHub Issue #1384.
3. Align Resource Names
If possible, consider aligning the resource names used in your application to avoid this issue altogether. This would be the cleanest solution as it works with refine's built-in invalidation system.
Conclusion
The issue is related to how refine handles query invalidation when resources don't match. By using one of the approaches above, you should be able to get your table to refresh properly after deletion.
Hope this helps solve your issue!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@224018850419572736> Kapa.ai is still learning and improving, please let me know how I did by reacting below.