How do use conform when not using remix or react router

[rostero1]

I have a form that uses @tanstack/query useMutation. I can pass an async onSubmit option to useForm, but I don't see how I can trigger any submitting, success, or failures? Or does conform not work with this pattern?

https://stackblitz.com/edit/vitejs-vite-aq99mc?file=src%2FApp.tsx,src%2FForm.tsx,src%2Fmain.tsx,node_modules%2F%40conform-to%2Fdom%2Fsubmission.d.ts&terminal=dev

[edmundhung]

You can access the submission in the onSubmit handler and pass the value to tanstack query like this:

 const [form, fields] = useForm({
    shouldValidate: 'onBlur',
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
    onSubmit: async (event, { submission }) => {
      event.preventDefault();

      if (!submission || submission.status !== 'success') {
        // Submission failed, do nothing
        return;
      }
      
      // Access the parsed result from the submission and pass it to tanstack query
      await mutate(submission.value);
    },
  });

[rostero1]

Thanks for the help. I may be confused. Where is submission being derived from? I thought onSubmit was doing the submission here. I'm looking to have mutate be my API call to the backend. I need to use those results to display a success or failure message.