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)
}9 Replies
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:
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:
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:
----------------------<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronze•7mo ago
@kapa.ai Is it correct to send put and then send patch?
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:
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:
----------------------<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
Let me check the knowledge base for you. One moment! :books:
metropolitan-bronze•7mo 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 .
----------------------
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:
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:
----------------------<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below