national-gold•2w ago

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

kapa.ai•2w ago

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 by useTable doesn't match the resource value of the useDelete hook, then the user has to manage the invalidation.

GitHub Issue #5125 Solutions You have a few options to fix this: 1. Use useInvalidate hook You can manually trigger invalidation after deletion by using the onSuccess callback of the DeleteButton:

import { useInvalidate } from "@refinedev/core";

const invalidate = useInvalidate();

// ...

<DeleteButton
  hideText
  size="small"
  recordItemId={record.id}
  onSuccess={() => {
    invalidate({
      resource: "your-explicit-resource-name",
      invalidates: ["list"],
    });
  }}
/>

import { useInvalidate } from "@refinedev/core";

const invalidate = useInvalidate();

// ...

<DeleteButton
  hideText
  size="small"
  recordItemId={record.id}
  onSuccess={() => {
    invalidate({
      resource: "your-explicit-resource-name",
      invalidates: ["list"],
    });
  }}
/>

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:

const { tableProps, tableQueryResult } = useTable({
  resource: "your-explicit-resource-name"
});

// ...

<DeleteButton
  hideText
  size="small"
  recordItemId={record.id}
  onSuccess={() => {
    tableQueryResult.refetch();
  }}
/>

const { tableProps, tableQueryResult } = useTable({
  resource: "your-explicit-resource-name"
});

// ...

<DeleteButton
  hideText
  size="small"
  recordItemId={record.id}
  onSuccess={() => {
    tableQueryResult.refetch();
  }}
/>

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: ----------------------

kapa.ai•2w ago

<@224018850419572736> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Antd <Table> not refreshing when record deleted with <DeleteButton> action.

Did you find this page helpful?