sensitive-blue•2d ago

Api request on button press

So I have a resource where the status can be approved or rejected by doing /budget-requests/{id}/approve or ..../reject, what hooks can I use to call this on button press?

2 Replies

kapa.ai•2d ago

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To call an API endpoint on button press for approving or rejecting a budget request in refine, you can use the useCustomMutation hook. This hook is designed for sending custom mutation requests and is well-suited for your use case. Here's how you can implement it: 1. First, import the useCustomMutation hook:

import { useCustomMutation, useApiUrl } from "@refinedev/core";

import { useCustomMutation, useApiUrl } from "@refinedev/core";

2. Then, inside your component, set up the mutation:

const apiUrl = useApiUrl();
const { mutate: approveBudget } = useCustomMutation();
const { mutate: rejectBudget } = useCustomMutation();

// Function to handle approve button click
const handleApprove = (id: string) => {
  approveBudget({
    url: `${apiUrl}/budget-requests/${id}/approve`,
    method: "post",
  });
};

// Function to handle reject button click
const handleReject = (id: string) => {
  rejectBudget({
    url: `${apiUrl}/budget-requests/${id}/reject`,
    method: "post",
  });
};

const apiUrl = useApiUrl();
const { mutate: approveBudget } = useCustomMutation();
const { mutate: rejectBudget } = useCustomMutation();

// Function to handle approve button click
const handleApprove = (id: string) => {
  approveBudget({
    url: `${apiUrl}/budget-requests/${id}/approve`,
    method: "post",
  });
};

// Function to handle reject button click
const handleReject = (id: string) => {
  rejectBudget({
    url: `${apiUrl}/budget-requests/${id}/reject`,
    method: "post",
  });
};

3. Use these functions in your button onClick handlers:

<button onClick={() => handleApprove(budgetRequestId)}>Approve</button>
<button onClick={() => handleReject(budgetRequestId)}>Reject</button>

<button onClick={() => handleApprove(budgetRequestId)}>Approve</button>
<button onClick={() => handleReject(budgetRequestId)}>Reject</button>

The useCustomMutation hook allows you to send custom requests to your API endpoints. It's particularly useful for actions that don't fit into the standard CRUD operations useCustomMutation documentation (https://refine.dev/docs/data/hooks/use-custom-mutation/). If you need to add headers or additional configuration to your request, you can do so using the config property:

approveBudget({
  url: `${apiUrl}/budget-requests/${id}/approve`,
  method: "post",
  config: {
    headers: {
      "x-custom-header": "foo-bar",
    },
  },
});

approveBudget({
  url: `${apiUrl}/budget-requests/${id}/approve`,
  method: "post",
  config: {
    headers: {
      "x-custom-header": "foo-bar",
    },
  },
});

Remember to handle loading states and error cases as needed in your component. The useCustomMutation hook provides properties like isLoading and error that you can use for this purpose useCustomMutation API Reference (https://refine.dev/docs/data/hooks/use-custom-mutation/#api-reference). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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