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.

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

Expose routing promises #11564

Closed
ryanflorence opened this issue May 17, 2024 · 6 comments · Fixed by #11521
Closed

Expose routing promises #11564

ryanflorence opened this issue May 17, 2024 · 6 comments · Fixed by #11521
Assignees
Labels

Comments

@ryanflorence
Copy link
Member

ryanflorence commented May 17, 2024

In order for React Router transitions to compose with React 19 transitions we need to expose the promises from all of our transition functions:

navigate()
submit()
fetcher.submit()
fetcher.load()
revalidator.revalidate()

This way developers can call into React Router from inside a React transition

let [isPending, startTransition] = useTransition()
startTransition(async () => {
  let stuff = await doSomething()
  let more = await fetcher.submit({ stuff }, { method: "post" })
});

Will add in 7.1

@ryanflorence ryanflorence converted this from a draft issue May 17, 2024
@bluefire2121
Copy link

Very cool! I guess you can do this as well.

const [isPending, startTransition] = useTransition()
startTransition(async () => {
  const [more, stuff] = await Promise.all([fetcher.submit({ stuff }, { method: "post" }), doSomething()]);
});

@brophdawg11 brophdawg11 changed the title expose promises Expose routing promises May 20, 2024
@ryanflorence ryanflorence moved this from In Progress to Planned in Roadmap May 20, 2024
@brophdawg11 brophdawg11 added the v7 label Jun 14, 2024
@wondering639
Copy link

@ryanflorence so, is that included in react-router@7.1.1? if not, any ETA on this topic? Looking forward to it, thanks :-)

@sergiodxa
Copy link
Member

@wondering639 this is already on v7

@brophdawg11
Copy link
Contributor

Parts of this are on v7 - the methods return promises - but at the moment they don't resolve through with the data since that posed some technical issues when we first did the work. We do hope to get that added in the future though.

let result = await fetcher.submit();
// result will be undefined, `data` will be in `fetcher.data`

@devnomic
Copy link

devnomic commented Jan 4, 2025

For me it was not working as expected.
When I tried the results for the first time, fetcher.data was undefined.

However, if you submit again, fetcher.data will return the result from the first submission, as if there is a one-step delay.

 async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData();
    formData.append("action", "createUploadUrl");

    await fetcher.submit(formData, {
      method: "post",
      action: "/resources/upload",
    });
    console.log("data", fetcher.data);
  }

@github-project-automation github-project-automation bot moved this from Planned to Merged/Done in Roadmap Jan 6, 2025
Copy link
Contributor

🤖 Hello there,

We just published version 6.28.2-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

6 participants