passive-yellow•2y ago

how to make POST api request by click on Save Button

I have to call this POST api "users/edit/:id" with refine inferencer above API config contain dynamic id in param and other data in body

12 Replies

kapa.ai•2y ago

Hi @kyvoxdev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- To make a POST request with a dynamic ID in the URL and other data in the body, you can use the useCustom data hook provided by Refine. Here's an example of how to use it: 1. First, add a custom method to your data provider to handle custom requests. You can find an example in the Refine documentation (https://refine.dev/docs/api-reference/core/providers/data-provider#custom). 2. Next, use the useCustom data hook in your component to make the POST request with the dynamic ID and other data in the body. Replace :id with the actual ID value you want to use.

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

const { mutate: editUser } = useCustom({
  resource: "users",
  method: "post",
});

const handleSubmit = async (id, userData) => {
  await editUser({
    url: `/users/edit/${id}`,
    payload: userData,
  });
};

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

const { mutate: editUser } = useCustom({
  resource: "users",
  method: "post",
});

const handleSubmit = async (id, userData) => {
  await editUser({
    url: `/users/edit/${id}`,
    payload: userData,
  });
};

In this example, handleSubmit is a function that takes an id and userData as arguments. When called, it sends a POST request to the /users/edit/:id endpoint with the dynamic ID and the provided userData in the request body. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Data Provider | refine

Data provider acts as a data layer for your app, making HTTP requests and encapsulating how the data is retrieved. The methods of these requests are then consumed by refine via data hooks.

kapa.ai•2y ago

<@1106450860571111444> kapa.ai is still learning and improving, please let us how it did by reacting below

passive-yellowOP•2y ago

@kapa.ai I have to call this POST api "users/edit/:id" with refine inferencer above API config contain dynamic id in param and other data in body

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- Refine doesn't have a built-in "inferencer" feature. However, you can use the useCustom data hook provided by Refine to make a POST request with a dynamic ID in the URL and other data in the body. Here's an example of how to use it: 1. First, add a custom method to your data provider to handle custom requests. You can find an example in the Refine documentation (https://refine.dev/docs/api-reference/core/providers/data-provider#custom). 2. Next, use the useCustom data hook in your component to make the POST request with the dynamic ID and other data in the body. Replace :id with the actual ID value you want to use.

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

const { mutate: editUser } = useCustom({
  resource: "users",
  method: "post",
});

const handleSubmit = async (id, userData) => {
  await editUser({
    url: `/users/edit/${id}`,
    payload: userData,
  });
};

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

const { mutate: editUser } = useCustom({
  resource: "users",
  method: "post",
});

const handleSubmit = async (id, userData) => {
  await editUser({
    url: `/users/edit/${id}`,
    payload: userData,
  });
};

In this example, handleSubmit is a function that takes an id and userData as arguments. When called, it sends a POST request to the /users/edit/:id endpoint with the dynamic ID and the provided userData in the request body. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Data Provider | refine

Data provider acts as a data layer for your app, making HTTP requests and encapsulating how the data is retrieved. The methods of these requests are then consumed by refine via data hooks.

kapa.ai•2y ago

<@1106450860571111444> kapa.ai is still learning and improving, please let us how it did by reacting below

passive-yellowOP•2y ago

@kapa.ai I am getting ERROR Property 'mutate' does not exist on type 'QueryObserverResult<CustomResponse<BaseRecord>, HttpError>'.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion earlier. To make a POST request with a dynamic ID in the URL and other data in the body, you should use the useCustomMutation hook instead of useCustom. Here's an example of how to use it:

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

const { mutate: editUser } = useCustomMutation();

const handleSubmit = async (id, userData) => {
  await editUser({
    url: `/users/edit/${id}`,
    method: "post",
    values: userData,
  });
};

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

const { mutate: editUser } = useCustomMutation();

const handleSubmit = async (id, userData) => {
  await editUser({
    url: `/users/edit/${id}`,
    method: "post",
    values: userData,
  });
};

In this example, handleSubmit is a function that takes an id and userData as arguments. When called, it sends a POST request to the /users/edit/:id endpoint with the dynamic ID and the provided userData in the request body. You can find more information about the useCustomMutation hook in the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@1106450860571111444> kapa.ai is still learning and improving, please let us how it did by reacting below

foreign-sapphire•2y ago

Hey @kyvoxdev, You can use meta to send custom variables to your data provider. You can check this to learn how to do: https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/#meta-usage Btw, the inferencer has developed for development environment. So, you can't do this on Inferencer. However, you can copy the generated code and you can customize it.

passive-yellowOP•2y ago

Thanks @salihozdemir 👍

how to make POST api request by click on Save Button

Did you find this page helpful?