How to implement onSuccess, onError message after form submission like react-query?

[cliffordfajardo]

Currently, I'm refactoring some react-query style code over to fullstack Remix app.

After a submission is there a way to:

1. check if a form submission was submitted & successful?
2. check if a form submission was submitted & unsuccessful?

Left (react-query style code) ----- Right (in progress remix code)

Related Threads

• Discord thread 1
• Discord thread 2

[lili21]

the remix way to handle submission feedback is always bug me.

[andrelandgraf]

Hey @cliffordfajardo!

There are a couple of ways to show/flash success and error messages after a form submit. The most prominent ones are using action data or a cookie:

With action data

The most straightforward way is to return action data from your action and use the useActionData hook to check if there was an error or not:

export async function action({ request }: ActionArgs) {
    const formData = await request.formData();
    const name = formData.get("name");
    const email = formData.get("email");
    if(!name || !email || typeof name !== "string" || typeof email !== "string") {
        return json({ error: "Some data is missing. Please fill out all fields." });
    }
    const succ = await subscribeToNewsletter(name, email);
    if(!succ) {
        return json({ error: "Something went wrong. There was an error saving your data. Please try again." });
    }
    return json({ success: true });
}

export default function Page() {
  const actionData = useActionData();
  hasSucceeded = !!actionData?.success;
  hasFailed = !!actionData?.error;
}

You can find an example implementation here.

This works for both useFetcher and Form submits. It also works without JavaScript if the action is on the same page as the form that submits.

Of course, it might make sense to build your own abstraction layer on top. I built one for flashing a success message using action data here.

With cookie

Personally, I love using cookies for session states (including form submission states). You can create a session cookie with Remix's createCookieSessionStorage helper and use the flash function to write temporary data to the cookie. This works great even when redirects are involved. Works like a charm both with and without JavaScript!

Hope this helps!

[andrelandgraf]

Would you be able to call that function in a useEffect?

[tyteen4a03]

Yes, but it ends up being called multiple times. I was not able to trace down why it did it, but I suspect it had something to do with the nesting level of the route.

[andrelandgraf]

Happy to take a look if you share some code or a link to a repo!

[dusty]

I set a unique id server side when I set the toast cookie. Then in the useEffect on the root component where I show the toast's, I check to see if I've already fired that one. Its not idea, but it did stop chakra showing dups.

[tyteen4a03]

I can't share the code but here's the discussion on Discord: https://discord.com/channels/770287896669978684/1036746016839454850/1036746016839454850

[cliffordfajardo]

Update: created a tiny abstraction over useSubmit & useFetcher to get the react-query lifecycle hook behavior I needed in my app

useRemixSubmit & useRemixFetcher

These hook follows a similar API to the original useSubmit & useFetcher remix hook. Main difference is you can pass onSuccess, onError callbacks to the hook

// Example stackblitz sandbox: stackblitz.com/edit/node-s1xxwy?file=package.json,app%2Froutes%2Findex.tsx

const {submit, ...} = useRemixFetcher({
  onSuccess(){..}, 
  onError(){..}
})

const {submit, ...} = useRemixSubmit({
  onSuccess(){..}, 
  onError(){..}
})

Stackblitz example with source code: https://stackblitz.com/edit/node-s1xxwy?file=package.json,app%2Froutes%2Findex.tsx

I took inspiration from @andrelandgraf 's response - in my loader/actions I now always return a success:boolean field in my loader json:

// My loaders and actions always return this shape now
JSONResponse<T> = {
  success: boolean;  // useRemixSubmitHook uses this field
  data: T; // any data from your API etc..
  error?: {
    message: string;
  };
};

Hopefully, similar lifecycle hooks get into remix core; Remix team mentioned he's been thinking about adding these lifecycle callbacks

• Add `submitOptions` argument for `useSubmit` and `useFetcher` react-router#9737 (comment)

[bzitzow-osh]

This thread is the first result for remixjs fetcher.Form on success. It'd be nice if it was RemixJS official documentation instead.

[kiliman]

It's not in the official documentation because this is a custom hook that someone wrote.