How to implement onSuccess, onError message after form submission like react-query? #4559
-
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 7 replies
-
the remix way to handle submission feedback is always bug me. |
Beta Was this translation helpful? Give feedback.
-
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 dataThe most straightforward way is to return action data from your action and use the 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 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 cookiePersonally, I love using cookies for session states (including form submission states). You can create a session cookie with Remix's Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
Update: created a tiny abstraction over useRemixSubmit & useRemixFetcherThese hook follows a similar API to the original // 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 // 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 |
Beta Was this translation helpful? Give feedback.
-
This thread is the first result for |
Beta Was this translation helpful? Give feedback.
Update: created a tiny abstraction over
useSubmit
&useFetcher
to get the react-query lifecycle hook behavior I needed in my appuseRemixSubmit & useRemixFetcher
These hook follows a similar API to the original
useSubmit
&useFetcher
remix hook. Main difference is you can passonSuccess
,onError
callbacks to the hookStackblitz example with source code: https://stackblitz.com/edit/node-s1xxwy?file=package.json,app%2Froutes%2Find…