How to prevent/ignore redirect calls inside server actions
Answered
Chartreux posted this in #help-forum
ChartreuxOP
I am calling a server action which has a redirect call. However, in this particular case (while running during dev mode) I want to ignore the redirect call. I tried try catch but my browser will instantly redirect to a new page. Is it possible to ignore the redirect call inside server action when calling from a client component?
Answered by Ray
I was testing with this
"use server";
import { redirect } from "next/navigation";
export async function action2() {
redirect("/search");
}
export async function action(formData: FormData) {
await action2().catch((e) => {});
}24 Replies
@Chartreux I am calling a server action which has a redirect call. However, in this particular case (while running during dev mode) I want to ignore the redirect call. I tried try catch but my browser will instantly redirect to a new page. Is it possible to ignore the redirect call inside server action when calling from a client component?
could you show the code on how did you use try/catch?
ChartreuxOP
yes I will show you please hold on
// actions.ts
export async function sendVerificationCode2(data: Schema, lang: string) {
// I want to prevent this redirect (catch it and extract it instead)
redirect(`/${lang}/signIn?verificationCodeId=${'randomuuid'}`, RedirectType.replace)
}// actions.dev.client.ts
export async function addTestAccountAndTestData() {
if (!DEV) {
return {success: false, message: 'This function is only available in development mode'} as const
}
// 1. Log out of any existing account
await auth.signOut()
console.log('sendVerificationCode')
// 2. Create a new account
try {
const res = await sendVerificationCode2({email: 'test@korder.app'}, 'en').catch((e) => {
console.log(e)
if (isRedirectError(e)) {
console.log(e)
}
return {success: false, message: e.message} as const
})
console.log(res)
} catch (e) {
console.log('catch error', e)
}
}ChartreuxOP
hm...... weird are you saying it "redirects" or doesn't redirect
it doesn't redirect
ChartreuxOP
my 'actions.dev.client.ts" is called from a client button component, is that what you tried too?
@Chartreux my 'actions.dev.client.ts" is called from a client button component, is that what you tried too?
Yes it work with server and client component for me
ChartreuxOP
Thanks for verifying. I will try to reproduce from a fresh NextJS project !
ChartreuxOP
It still redirects even on a fresh nextjs project
@Chartreux https://github.com/bosung90/nextjs-test-prevent-redirect
oh you are catching on client side
ChartreuxOP
Yes, my hope is to automate some process without touching server actions
I was testing with this
"use server";
import { redirect } from "next/navigation";
export async function action2() {
redirect("/search");
}
export async function action(formData: FormData) {
await action2().catch((e) => {});
}Answer
ChartreuxOP
hm... I see
I don't think it is possible to catch it on client side
try to define a wrapper function for the server action or do something like this
await sendVerificationCode2({email: '', shouldRedirect: false})
async function sendVerificationCode2({email, shouldRedirect = true}) {
...
if (shouldRedirect) redirect("")
}ChartreuxOP
I can definitely do that. It just sucks that I need to touch the server action (multiple actions).
or maybe I can try to see if I can use RSC for this... hmm
@Chartreux or maybe I can try to see if I can use RSC for this... hmm
how you gonna do that with RSC?
you mean turn the client component to server?
ChartreuxOP
yes try to use RSC instead of client component
@Chartreux yes try to use RSC instead of client component
yeah that should work
ChartreuxOP
So many restrictions with RSC so I am just going to create a new server action (called from my original client button) that catches redirect. Thanks Ray for all the help!