exotic-emerald•6mo ago

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

kapa.ai•6mo 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: ----------------------

kapa.ai•6mo ago

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

exotic-emerald•6mo ago

@kapa.ai Is it correct to send put and then send patch?

kapa.ai•6mo 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: ----------------------

kapa.ai•6mo ago

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

kapa.ai•6mo ago

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

exotic-emerald•6mo 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 .

kapa.ai•6mo 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: ----------------------

kapa.ai•6mo ago

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