react-router icon indicating copy to clipboard operation
react-router copied to clipboard

Expose routing promises

Open ryanflorence opened this issue 1 year ago • 1 comments

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 avatar May 17 '24 21:05 ryanflorence

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()]);
});

bluefire2121 avatar May 18 '24 00:05 bluefire2121

@ryanflorence so, is that included in [email protected]? if not, any ETA on this topic? Looking forward to it, thanks :-)

wondering639 avatar Jan 02 '25 21:01 wondering639

@wondering639 this is already on v7

sergiodxa avatar Jan 03 '25 17:01 sergiodxa

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`

brophdawg11 avatar Jan 03 '25 18:01 brophdawg11

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);
  }


devnomic avatar Jan 04 '25 11:01 devnomic

🤖 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!

github-actions[bot] avatar Jan 14 '25 16:01 github-actions[bot]