How to call async function inside a default route function?

[yongzhang]

Hi, there

I'm totally new to React and Remix, I have a route test.jsx with code like this:

import { GetMyAppsByUserID } from somewhere

export default function MyRoute() {
  const myProfile = useOutletContext();
  const myUserID = myProfile.id;
  const myApps = await GetMyAppsByUserID(myUserID);     <<< problem here

  return (
    <>
    loop {myApps} here
    </>
}

I don't know how to call the async function GetMyAppsByUserID here, appreciate for the help.

[sergiodxa]

You can't do that, Remix doesn't support React Server Components, and in a normal React component you can't call that, instead you need to export a loader and call GetMyAppsByUserID there

[yongzhang]

yea I thought about this, but then the problem is:

const myProfile = useOutletContext();

I need to checkout myUserID from outlet context, but we can't use useOutletContext in a loader. How to fix this problem?

[sergiodxa]

Whatever you get from your outlet, get it in the loader. So in your child route loader get the user profile, or if you only need an ID keep it on a cookie/session after login so you can just read the ID from there.

[yongzhang]

OK, get it, thanks for the help.