Patch will be processed after Put transmission.

export const EditProps = ({ items, id, point }: IEditPageProps) => { const [itemsState, setItemsState] = useState(items) const [pointState, setPointState] = useState(point) const { register, handleSubmit, refineCore: { onFinish }, } = useForm<TermValues, HttpError, TermValues>({ shouldUseNativeValidation: true, refineCoreProps: { resource: 'customergroups', action: 'edit', id: id, }, }) const apiUrl = process.env.NEXT_PUBLIC_CAFE24_API_URL const onSubmit = async () => { const combinedState = { ...itemsState, ...pointState } await axios.put(${apiUrl}/customergroups/${id}, combinedState).then((res) => res.data) return onFinish(itemsState) }
K
kapa.ai70d ago
Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided extracts, it seems like you're trying to use the useForm hook from Refine to handle form submissions in your EditProps component. You're also using axios to make a PUT request to an API endpoint. However, it's important to note that the onFinish function from useForm is meant to be used as the callback for when the form is successfully submitted. In your case, you're calling it manually after the axios.put request. Here's a simplified version of your code:
export const EditProps = ({ items, id, point }: IEditPageProps) => {
const [itemsState, setItemsState] = useState(items)
const [pointState, setPointState] = useState(point)
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, TermValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups',
action: 'edit',
id: id,
},
})

const apiUrl = process.env.NEXT_PUBLIC_CAFE24_API_URL
const onSubmit = async () => {
const combinedState = { ...itemsState, ...pointState }
await axios.put(`${apiUrl}/customergroups/${id}`, combinedState).then((res) => res.data)
return onFinish(itemsState)
}
}
export const EditProps = ({ items, id, point }: IEditPageProps) => {
const [itemsState, setItemsState] = useState(items)
const [pointState, setPointState] = useState(point)
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, TermValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups',
action: 'edit',
id: id,
},
})

const apiUrl = process.env.NEXT_PUBLIC_CAFE24_API_URL
const onSubmit = async () => {
const combinedState = { ...itemsState, ...pointState }
await axios.put(`${apiUrl}/customergroups/${id}`, combinedState).then((res) => res.data)
return onFinish(itemsState)
}
}
In the onSubmit function, you're combining the itemsState and pointState into a single object, then sending that as the body of the PUT request. After the request is made, you're calling onFinish with itemsState as the argument. If you want to handle the form submission within the onFinish function, you can do so by passing onFinish as the argument to handleSubmit. Here's an example:
export const EditProps = ({ items, id, point }: IEditPageProps) => {
const [itemsState, setItemsState] = useState(items)
const [pointState, setPointState] = useState(point)
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, TermValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups',
action: 'edit',
id: id,
},
})

const apiUrl = process.env.NEXT_PUBLIC_CAFE24_API_URL
const onSubmit = async (data: TermValues) => {
const combinedState = { ...itemsState, ...pointState }
await axios.put(`${apiUrl}/customergroups/${id}`, combinedState).then((res) => res.data)
return onFinish(data)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* form fields go here */}
</form>
)
}
export const EditProps = ({ items, id, point }: IEditPageProps) => {
const [itemsState, setItemsState] = useState(items)
const [pointState, setPointState] = useState(point)
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, TermValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups',
action: 'edit',
id: id,
},
})

const apiUrl = process.env.NEXT_PUBLIC_CAFE24_API_URL
const onSubmit = async (data: TermValues) => {
const combinedState = { ...itemsState, ...pointState }
await axios.put(`${apiUrl}/customergroups/${id}`, combinedState).then((res) => res.data)
return onFinish(data)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* form fields go here */}
</form>
)
}
In this version, onSubmit is passed as the argument to handleSubmit, which means it will be called when the form is submitted. The data argument of onSubmit will contain the form values. Please note that this is a general guidance based on the provided extracts. For more specific information about using useForm in Refine, you can refer to the official documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai70d ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
F
flat-fuchsia70d ago
@kapa.ai Is it correct to send put and then send patch?
K
kapa.ai70d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Whether to use PUT or PATCH depends on the specific requirements of your application and the API you're working with. In general, PUT is used to update a whole resource, while PATCH is used to update only certain fields of a resource. If you're updating all fields of a resource, you might use a PUT request. If you're only updating some fields, you might use a PATCH request. However, it's not common to send a PUT request and then a PATCH request for the same resource. Usually, you would choose one or the other based on what you need to do. In the context of Refine, you can customize the behavior of your data provider to use PUT instead of PATCH for updates. This is shown in the documentation (https://refine.dev/docs/data/data-provider#how-i-can-override-a-specific-method-of-data-providers) extract:
import dataProvider from "@refinedev/simple-rest";

const simpleRestProvider = dataProvider("API_URL");
const myDataProvider = {
...simpleRestProvider,
update: async ({ resource, id, variables }) => {
const url = `${apiUrl}/${resource}/${id}`;

const { data } = await httpClient.put(url, variables);

return {
data,
};
},
};

<Refine dataProvider={myDataProvider}>{/* ... */}</Refine>;
import dataProvider from "@refinedev/simple-rest";

const simpleRestProvider = dataProvider("API_URL");
const myDataProvider = {
...simpleRestProvider,
update: async ({ resource, id, variables }) => {
const url = `${apiUrl}/${resource}/${id}`;

const { data } = await httpClient.put(url, variables);

return {
data,
};
},
};

<Refine dataProvider={myDataProvider}>{/* ... */}</Refine>;
In this example, the update method of the data provider is overridden to use PUT instead of PATCH. If you want to use PATCH for certain updates and PUT for others, you could add a separate method to your data provider and use that method as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai70d ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
K
kapa.ai70d ago
Let me check the knowledge base for you. One moment! :books:
F
flat-fuchsia70d ago
@kapa.ai In my opinion const apiUrl = process.env.NEXT_PUBLIC_CAFE24_API_URL const onSubmit = async (data: TermValues) => { const combinedState = { ...itemsState, ...pointState } console.log(combinedState) await axios.put(${apiUrl}/customergroups/${id}, combinedState).then((res) => res.data) return onFinish(data) } This code is unnecessary, <form onSubmit={handleSubmit(onSubmit)}> I think you should look at onFinish from .
K
kapa.ai70d ago
---------------------- You're correct. The onFinish function from the useForm hook in Refine is designed to handle form submissions, including making the appropriate API requests based on the action property. In your case, you're manually making a PUT request using axios in the onSubmit function, and then calling onFinish. This might be unnecessary if you configure your data provider correctly to handle updates. Here's how you might use onFinish directly:
export const EditProps = ({ items, id, point }: IEditPageProps) => {
const [itemsState, setItemsState] = useState(items)
const [pointState, setPointState] = useState(point)
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, TermValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups',
action: 'edit',
id: id,
},
})

const onSubmit = async (data: TermValues) => {
const combinedState = { ...itemsState, ...pointState, ...data }
return onFinish(combinedState)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* form fields go here */}
</form>
)
}
export const EditProps = ({ items, id, point }: IEditPageProps) => {
const [itemsState, setItemsState] = useState(items)
const [pointState, setPointState] = useState(point)
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, TermValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups',
action: 'edit',
id: id,
},
})

const onSubmit = async (data: TermValues) => {
const combinedState = { ...itemsState, ...pointState, ...data }
return onFinish(combinedState)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* form fields go here */}
</form>
)
}
In this version, onSubmit combines itemsState, pointState, and the form values into a single object, and then passes that to onFinish. The onFinish function will then handle making the appropriate API request. Please note that this is a general guidance based on the provided extracts. For more specific information about using useForm in Refine, you can refer to the official documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai70d ago
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
Refine Sider ModificationI'm working on a Refine project using Material UI and facing a particular challenge. I need to add ahelp with npm version 3.6.3Hello everyone, could someone help me instal refine version 3.6.4 because im trying to follow a cerRun refine on hosting providerHow to deploy refine in cPanelConnect Rest api (Express) with simple-rest list based on the company id to get all job-offersHi im relatively new to refine. I made a Rest api endpoint using express to get alle the job-offers useShow in nextjs is not extracting the id from the pathmy path is /blog/[id/page.tsx and it looks liek this: 'use client'; import { useShow } from '@reffilter works in some resources and doesnt work in some other.also case insensitivity doesn't work. changing filterOperator to containss didnt help. when filterOpnode_modulesafter installing the graphql codegen iam facing this error on both of tsconfig.json file on the coreNext.js App routeris there a way to start a next.js proyect with app routes instead pages routes using npm create refNotification providerHow to customize success notification on create, edit, update and deletehi! im new here, is there a way tohi! im new here, is there a way to initialize a next.js project with app route using create-refine -Vite File Based Routing in RefineHow can I use Vite file based routing in refinePro Service - Refine ExpertHi I have tried to contact the Enterprise service of Refine but I did not get any answer for a monthHow can I make the check function work with httpOnlyFor my authentication, the api makes use of cross-site httpOnly cookies, which means I cannot check Is it possible to debug the checkIs it possible to debug the check function inside the authProvider, since for whatever reason that fStep formHow to use create form in stepsAdd a page other than CRUD and make the menu highlightableI am using Refine with Antd. I have a resource called 'activities' and I have added CRUD pages for tUnable to proceed from login pageI am busy with crm-example and i have just did the auth provider, and also finished adding it to my Refine, unable to login.My page can't seem to route to the next page even though the correct loguin details are entered, it Auto fill fieldsHow to fill fields of a populated data. Ex: I have two resources, one is "products" and the other isTable selectionHow to use delete action on selected line with table selection in ant design