How do you return data from a form submission?

[tmcw]

I have a form in my application which has previously had the workflow of:

1. The form is submitted
2. If the operation succeeds, I throw a redirect to the next page
3. If the operation fails, I return submission.reply(), which sends validation errors to the page

I would like the action to be able to return data, now, so that the page can update in place and show a value temporarily (the page is for generating an API token, and I want the user to be able to copy it once, and I do not want to expose the secret value in a query string parameter, so returning it in the POST response body is the right place).

I haven't been able to figure out how this could fit into conform's system: if I return a bare object or a Response.json from the action, then it'll break all of conform's types. Cramming this data into ReplyOptions seems like cutting against the grain since those are pretty clearly intended to be about errors, not success values.

I'm confused - is it possible to do this within the strategy of conform, or do I need to refactor this form to not use conform? Thanks!

[edmundhung]

You can always return some extra data along the submission object, without using Conform.

// Assuming you are using Remix, but the same applies to React Router / NextJS
export async function action() {
  // ...

  return json({
    lastResult: submission.reply(),
    apiToken: '......',
  });
}

export default function Example() {
  const actionData = useActionData<typeof action>();
  const [form, fields] = useForm({
    lastResult: actionData?.lastResult,
  });

  // Do anything you want with `actionData?.apiToken` 
}

Just make sure the return type of your action is consistent, then the type should infer properly.