Autosave user input

[cr101]

Hi,

I was wondering if creating an autosave feature is possible?
I'm tinnking of functionality that automatically saves the user data in the database after an interval (60 seconds) while the user is filling out a long form (i.e survey) so that, if the site goes offline or something else goes wrong, users haven’t lost all of the hard work.
Has anyone built an example of this?

[kentcdodds]

I don't have an example, but I would suggest using conform's requestIntent helper: https://conform.guide/intent-button

[cr101]

Could conform's requestIntent helper: be used to automatically save the form data every 60 seconds without doing form validation?

[edmundhung]

All you need is an intent button with the formNoValidate attributes set.

import { parse } from '@conform-to/zod';
import { useForm, conform } from '@conform-to/react';

export async function loader() {
  return json({
    defaultValue: /* read the last saved value */ 
  });
}

export async function action({ request }) {
  const formData = await request.formData();
  const submission = parse(formData, /* ... */);

  // The `intent` is defined by the `value` on the button
  if (submission.intent === 'save') {
    // save the value

    return json(submission);
  }

  // ...
}

export default function Example() {
  const { defaultValue } = useLoaderData();
  const form = useForm({
    defaultValue,
  });
  const saveButtonRef = useRef<HTMLButtonElement>(null);
 
  useEffect(() => {
   // Do any logic you want and click the button when it is ready
   saveButtonRef.current?.click();
  },[]);

  return (
    <form>
      {/* ... all your form fields */ }

      {/* This is a normal submit button */}
      <button>Submit</button>

      {/* This is an hidden intent button  */}
      <button
        ref={saveButtonRef}
        name={conform.INTENT}
        hidden
        value="save"
        formNoValidate
      >
        Save
      </button>
    </form>
  );
}

You can also use the requestIntent helper as @kentcdodds mentioned. The idea would be similar.

[cr101]

Thank you, that makes sense. Is this the best way to automatically save the form data every 60 seconds once the form becomes 'dirty'?

useEffect(() => {
  const interval = setInterval(() => {
     saveButtonRef.current?.click();
  }, 60000);
  return () => clearInterval(interval);
}, []);

[vinstah]

I have a different way in mind for an offline app, save to local storage when input has changed, then when online they can choose to upload or edit form

[felixyeboah]

why don't you share here?