How to use Refine Antd DeleteButton with additional query params to the delete function?

This is my DeleteButton on the List

<DeleteButton
hideText
size="small"
recordItemId={record.id}
errorNotification={(error) => {
  const err = error as AxiosError<IError>

  return {
    message: "Error",
    description: err.response?.data?.error ?? "An error occurred",
    type: "error",
  }
}}
/>

<DeleteButton
hideText
size="small"
recordItemId={record.id}
errorNotification={(error) => {
  const err = error as AxiosError<IError>

  return {
    message: "Error",
    description: err.response?.data?.error ?? "An error occurred",
    type: "error",
  }
}}
/>

And my delete endpoint looks like this [DELETE] /service/:id?user_id=abc How can I pass the user ID to the delete resource?

5 Replies

kapa.ai•5mo ago

Hi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass additional query parameters like the user ID to the delete resource when using the Refine Ant Design DeleteButton, you can use the meta prop. This prop allows you to pass additional metadata to the delete mutation. Here's how you can modify your DeleteButton to include the user ID:

<DeleteButton
  hideText
  size="small"
  recordItemId={record.id}
  meta={{ user_id: 'abc' }}
  errorNotification={(error) => {
    const err = error as AxiosError<IError>

    return {
      message: "Error",
      description: err.response?.data?.error ?? "An error occurred",
      type: "error",
    }
  }}
/>

<DeleteButton
  hideText
  size="small"
  recordItemId={record.id}
  meta={{ user_id: 'abc' }}
  errorNotification={(error) => {
    const err = error as AxiosError<IError>

    return {
      message: "Error",
      description: err.response?.data?.error ?? "An error occurred",
      type: "error",
    }
  }}
/>

By adding the meta prop with { user_id: 'abc' }, you're passing this additional information to the delete mutation. The data provider will then use this metadata to construct the appropriate URL for the delete request, including the user_id as a query parameter. This approach is based on the information provided in the Refine documentation for the DeleteButton component API Reference (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/delete-button/#api-reference), which states:

meta | `MetaQuery` | Additional meta data to pass to the delete mutation from the data provider |  |

meta | `MetaQuery` | Additional meta data to pass to the delete mutation from the data provider |  |

Remember that your data provider needs to be configured to handle this additional metadata and construct the URL accordingly. If you're using a custom data provider, you may need to modify it to include the user_id from the meta object in the delete request URL. If you need to dynamically set the user ID, you can replace the hardcoded 'abc' with a variable or function call that returns the appropriate user ID for each delete operation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

rising-crimsonOP•5mo ago

I've tried this and still the payload did not sent @kapa.ai I've tried this and still the payload did not sent @kapa.ai

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If the meta prop is not working as expected, it might be due to the configuration of your data provider. The data provider is responsible for handling the meta object and using it to construct the appropriate API call. Here's an example of how you might handle the meta object in a custom data provider's delete method:

const myDataProvider = {  
  //...  
  delete: async ({  
    resource,  
    id,  
    meta,  
  }) => {  
    const userId = meta?.user_id ?? '';  
    const url = `${apiUrl}/${resource}/${id}?user_id=${userId}`;  
  
    //...  
    //...  
  
    const { data } = await httpClient.delete(url);  
  
    return {  
      data,  
    };  
  },  
  //...  
};

const myDataProvider = {  
  //...  
  delete: async ({  
    resource,  
    id,  
    meta,  
  }) => {  
    const userId = meta?.user_id ?? '';  
    const url = `${apiUrl}/${resource}/${id}?user_id=${userId}`;  
  
    //...  
    //...  
  
    const { data } = await httpClient.delete(url);  
  
    return {  
      data,  
    };  
  },  
  //...  
};

In this example, the delete method of the data provider retrieves the user_id from the meta object and includes it as a query parameter in the URL for the delete request. This approach is based on the information provided in the Refine documentation for the useDelete hook's Mutation Parameters (https://refine.dev/docs/data/hooks/use-delete/#meta), which explains how to use the meta object to pass additional information to data provider methods. If you're still having trouble, please check your data provider's configuration and ensure it's correctly handling the meta object. If you're using a built-in data provider from Refine, you may need to switch to a custom data provider to have full control over how API calls are constructed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

How to use Refine Antd DeleteButton with additional query params to the delete function?

Did you find this page helpful?