Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ActionForm follows redirects from leptos_actix::redirect and tries to deserialize the result causing an error #1600

Closed
JonRCahill opened this issue Aug 27, 2023 · 3 comments
Closed

ActionForm follows redirects from leptos_actix::redirect and tries to deserialize the result causing an error #1600

JonRCahill opened this issue Aug 27, 2023 · 3 comments

Comments

@JonRCahill
Copy link
Contributor

Describe the bug
If a server action performs a redirect and is called from an ActionForm submit, then the ActionForm will correctly redirect you to the destination page but it will also:

  • follow the redirect
  • make a new request to the destination
  • attempt to deserialize the result and raise an error

Leptos Dependencies

leptos = { version = "0.5.0-beta" }
leptos_meta = { version = "0.5.0-beta" }
leptos_actix = { version = "0.5.0-beta", optional = true }
leptos_router = { version = "0.5.0-beta" }

have also tried with the current version on main.

To Reproduce

  1. Have 2 routes
  2. On the first roue have an ActionForm with a single submit button and have a server function as it's action
  3. Handle any errors from the ActionForm action and log them to the console
  4. The server function has a redirect to the other route
  5. Click the button within the ActionForm
  6. Observe in the console an error logged similar to: Error: error deserializing server function results: expected value at line 1 column 1
  7. Observe in the network tab the additional fetch to the destination page

Example code:

use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/leptos_start.css"/>

        // sets the document title
        <Title text="Welcome to Leptos"/>

        // content for this welcome page
        <Router>
            <main>
                <Routes>
                    <Route path="" view=HomePage/>
                    <Route path="/another-page" view=AnotherPage/>
                </Routes>
            </main>
        </Router>
    }
}

/// Renders the home page of your application.
#[component]
fn HomePage() -> impl IntoView {
    let something = create_server_action::<SomeThing>();
    create_effect(move |_| {
        match something.value().get() {
            Some(Ok(success)) => {
                log::info!("Success: {}", success);
            }
            Some(Err(error)) => {
                log::error!("Error: {}", error);
            }
            _ => {}
        };
    });

    log::info!("Home Page");

    view! {
        <h1>"Welcome to Leptos!"</h1>
        <ActionForm action=something>
            <input type="hidden" name="should_work" value="true" />
            <button type="submit">
                "Redirect"
            </button>
        </ActionForm>
    }
}

#[component]
fn AnotherPage() -> impl IntoView {
    log::info!("Another Page");

    view! {
        <h1>"Another Page"</h1>
    }
}

#[server(SomeThing, "/api")]
pub async fn something(should_work: bool) -> Result<bool, ServerFnError> {
    leptos_actix::redirect("/another-page");

    Ok(true)
}

Expected behavior
The ActionForm should not follow the redirect so it doesn't produce an error or additional request.

Screenshots
Console with error received.
image

Network tab details showing the request to the something server action and the extra request to another-page
image

Request chain for extra request to another-page showing it is initiated from the something request
image

Additional context
A repo with the issue can be found here: https://github.com/JonRCahill/leptos-server-action-redirect-issue
@gbj
Copy link
Collaborator

gbj commented Aug 27, 2023

See #1358 and #1513. I'm open to suggestions on how this could be handled better but following the redirect is the browser's behavior when fetching a page that redirects, and I and the others in those issues have not found a way to prevent that while still redirecting.

@JonRCahill
Copy link
Contributor Author

Thanks for this info. I have read through the linked issues and dug around and yeah it doesn't look like there is a way to prevent the redirect. The extra request isn't too bad, but the error it still an issue. I have created a #1604 PR which just adds a guard to prevent parsing the body in-case of a redirect.

@JonRCahill JonRCahill mentioned this issue Aug 28, 2023
Merged
@gbj
Copy link
Collaborator

gbj commented Aug 30, 2023

Closed by #1604, thanks

@gbj gbj closed this as completed Aug 30, 2023
@WIGGLES-dev WIGGLES-dev mentioned this issue Nov 24, 2023
Closed
@gbj gbj mentioned this issue Jan 4, 2024
Merged
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gbj @JonRCahill