robust-apricot•10mo ago

useForm autosave debounce not working

I am setting my debounce to 6000ms yet autosave seems to be running much more often. It seems to be executing onFinish after every keypress and then queueing changes as I type so I get a flurry of autosaves all at once. I am using the Hasura data provider

12 Replies

kapa.ai•10mo ago

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The autoSave feature in refine is designed to automatically save changes made in a form after a specified debounce period. The debounce period is set using the debounce property of the autoSave prop. If you've set the debounce to 6000, the autoSave feature should ideally trigger a save operation 6000ms (6 seconds) after the user stops typing. However, from your description, it seems like the autoSave feature is triggering more frequently than expected. This could be due to a variety of reasons. It's possible that there might be an issue with how the autoSave prop is being used in your form. Here's an example of how to correctly use the autoSave prop with the useForm hook:

useForm({  
 refineCoreProps: {  
 autoSave: {  
 enabled: true,  
 debounce: 6000,  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 autoSave: {  
 enabled: true,  
 debounce: 6000,  
 },  
 },  
});

If you're using the autoSave prop correctly and still experiencing issues, it might be a good idea to check if there are any other parts of your code that could be causing the autoSave feature to trigger more frequently. For example, if you're using any other hooks or components that are causing the form data to update more frequently. If you're still having trouble, it might be a good idea to reach out to the refine community or check the refine documentation (https://refine.dev/docs) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

robust-apricot•10mo ago

@kapa.ai useForm has no property refineCoreProps so this example does not work

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, the useForm hook does not have a refineCoreProps property. The autoSave feature can be enabled directly within the useForm hook. Here's the correct way to use it:

import { useForm } from "@refinedev/react-hook-form";  
import { AutoSaveIndicator } from "@refinedev/mui";  

const MyComponent = () => {  
 const { refineCore: { autoSaveProps } } = useForm({  
 autoSave: {  
 enabled: true,  
 debounce: 6000,  
 },  
 });  

 return (  
 <>  
 /* ... */  
 <AutoSaveIndicator {...autoSaveProps}/>  
 </>  
 )  
}

import { useForm } from "@refinedev/react-hook-form";  
import { AutoSaveIndicator } from "@refinedev/mui";  

const MyComponent = () => {  
 const { refineCore: { autoSaveProps } } = useForm({  
 autoSave: {  
 enabled: true,  
 debounce: 6000,  
 },  
 });  

 return (  
 <>  
 /* ... */  
 <AutoSaveIndicator {...autoSaveProps}/>  
 </>  
 )  
}

In this example, useForm is called with an object that has an autoSave property. This property is an object that has an enabled property set to true and a debounce property set to 6000. This means that the form will automatically save changes every 6 seconds. The autoSaveProps object is then passed to the AutoSaveIndicator component, which provides visual feedback about the auto save status. If you're still experiencing issues with the autoSave feature triggering more frequently than expected, it might be a good idea to reach out to the refine community or check the refine documentation (https://refine.dev/docs) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

robust-apricot•10mo ago

@kapa.ai the autosave seems to be submitting new values to autosave without removing the previously queued values that should be overriden

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The autoSave feature in refine is designed to automatically save changes made in a form after a specified debounce period. If it's submitting new values without removing the previously queued values, it might be due to the debounce period being too short, causing the save operations to overlap. Here's an example of how to set the debounce period for the autoSave prop:

import { useForm } from "@refinedev/react-hook-form";  
import { AutoSaveIndicator } from "@refinedev/mui";  

const MyComponent = () => {  
 const { refineCore: { autoSaveProps } } = useForm({  
 autoSave: {  
 enabled: true,  
 debounce: 6000,  
 },  
 });  

 return (  
 <>  
 /* ... */  
 <AutoSaveIndicator {...autoSaveProps}/>  
 </>  
 )  
}

import { useForm } from "@refinedev/react-hook-form";  
import { AutoSaveIndicator } from "@refinedev/mui";  

const MyComponent = () => {  
 const { refineCore: { autoSaveProps } } = useForm({  
 autoSave: {  
 enabled: true,  
 debounce: 6000,  
 },  
 });  

 return (  
 <>  
 /* ... */  
 <AutoSaveIndicator {...autoSaveProps}/>  
 </>  
 )  
}

In this example, the debounce period is set to 6000 milliseconds (or 6 seconds). This means that the autoSave feature will wait for 6 seconds after the user stops typing before triggering a save operation. If you're still experiencing issues with the autoSave feature, it might be a good idea to reach out to the refine community or check the refine documentation (https://refine.dev/docs) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

robust-apricot•10mo ago

To reproduce this, type into an input field, wait a second or two shorter than debounce, type a little more and you'll see the update mutation run twice. So, initial debounce works but if typing occurs between initial edit and debounce, more mutations are queued What we really want is to remove any queued mutations if changes are still being made during the debounce interval

rival-black•10mo ago

are u using antd@5.36.0 https://github.com/refinedev/refine/releases/tag/%40refinedev%2Fantd%405.36.0 ? that was a bug and fixed in that version

GitHub

Release @refinedev/antd@5.36.0 · refinedev/refine

Minor Changes #4914 91a4d0da9f1 Thanks @yildirayunlu! - feat: optimisticUpdateMap prop added to useForm hook. This prop allows you to update the data in the cache. useForm({ mutationMode: &qu...

robust-apricot•10mo ago

I am using antd 5.36.14 and it still has the issue. Typically it will save twice in a row, but sometimes more often

rival-black•10mo ago

Thanks for the issue. I will debug