wise-white•5d ago

setting default value in useForm

const { formProps, saveButtonProps, queryResult, form, redirect, onFinish, ...rest } = useForm<User>({ action: 'edit', successNotification: { message: 'User updated successfully!', type: 'success', }, defaultFormValues: { isBetaUser: false, }, redirect: 'show', warnWhenUnsavedChanges: true, }); why does my defaultFormValues overwrite the value once the edit query finishes?

8 Replies

kapa.ai•5d ago

Hi @biohazard#1521. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're experiencing with defaultFormValues being overwritten once the edit query finishes is likely due to the way defaultFormValues is intended to work in the useForm hook. According to the documentation, defaultFormValues is used to pre-populate the form with initial data. However, when the action is set to "edit", the form will be populated with the data fetched from the server once the query completes, which can overwrite the initial default values you set. This is a known behavior and is mentioned in the documentation as a potential race condition when using async defaultFormValues with actions like "edit" or "clone". The form values will be the result of the last completed operation, which in your case, is the data fetched from the server for editing. To address this, you might consider handling the merging of default values and fetched data manually after the query completes, ensuring that your desired default values are preserved or appropriately merged with the fetched data. For more details, you can refer to the documentation on defaultFormValues (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#defaultformvalues). If you need further assistance, you might want to explore the refine documentation or community for more specific solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

wise-white•5d ago

@kapa.ai can you show an example on how to do the async default values?

kapa.ai•5d ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Certainly! Here's an example of how to use async defaultFormValues with the useForm hook in refine. This allows you to fetch default values asynchronously and use them to pre-populate your form:

const { defaultFormValuesLoading } = useForm({  
  defaultFormValues: async () => {  
    const response = await fetch("<https://my-api.com/posts/1">);  
    const data = await response.json();  
    return data;  
  },  
});

const { defaultFormValuesLoading } = useForm({  
  defaultFormValues: async () => {  
    const response = await fetch("<https://my-api.com/posts/1">);  
    const data = await response.json();  
    return data;  
  },  
});

In this example, defaultFormValues is an asynchronous function that fetches data from an API endpoint. The defaultFormValuesLoading state can be used to track the loading state while the data is being fetched. For more information, you can refer to the documentation on defaultFormValues (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#defaultformvalues) and defaultFormValuesLoading (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#defaultformvaluesloading). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

wise-white•5d ago

@kapa.ai so in that case i wouldn't set the action to edit? since i would prefer to not use the fetch explicitly like this, since i use the built in rest provider?

kapa.ai•5d ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you prefer not to fetch data explicitly and want to leverage the built-in REST provider with the edit action, you can still use defaultFormValues to set initial values that are not part of the fetched data. However, keep in mind that the fetched data will overwrite any conflicting fields in defaultFormValues. Here's how you can handle it: 1. Set the action to "edit": This will automatically fetch the data for the record you want to edit using the built-in REST provider. 2. Use defaultFormValues for non-conflicting fields: You can set default values for fields that are not part of the fetched data or handle merging manually after the data is fetched. 3. Handle merging manually if needed: If you need to ensure certain default values are preserved, you might need to handle this logic manually after the data is fetched. Unfortunately, there isn't a direct way to prevent the fetched data from overwriting specific fields using the built-in mechanisms if they conflict. You might need to implement custom logic to merge the fetched data with your desired default values. For more details, you can refer to the documentation on useForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/). If you need further assistance, consider exploring the refine community or documentation for more specific solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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