Getting User Info from route page

I might be fundamentally misunderstanding how this is supposed to work, so if that is the case please let me know.

I'm authenticating with Supabase via the /signin route, which stores the jwt in a cookie.
Now, when I load up index.tsx I'm hoping to get the User data to render on the page. Something simple like a "Hello {Username}".

Here is what my index.tsx looks like:

import { Component } from "solid-js";
import { createServerData$ } from "solid-start/server";
import Header from "~/components/Header";
import { getUser } from "~/lib/session";
import { useRouteData } from "solid-start";

export function routeData() {
  return createServerData$(async (_, event) => {
    const user = await getUser(event.request);
    console.log("Index.tsx", user);
    return {
      user: "",
    };
  });
}

const Home: Component = () => {
  const user = useRouteData<any>();

  console.log("Render:", user);

  return (
    <div class="mt-20 w-full max-w-lg mx-auto">
      <Header />
    </div>
  );
};

export default Home;

import { Component } from "solid-js";
import { createServerData$ } from "solid-start/server";
import Header from "~/components/Header";
import { getUser } from "~/lib/session";
import { useRouteData } from "solid-start";

export function routeData() {
  return createServerData$(async (_, event) => {
    const user = await getUser(event.request);
    console.log("Index.tsx", user);
    return {
      user: "",
    };
  });
}

const Home: Component = () => {
  const user = useRouteData<any>();

  console.log("Render:", user);

  return (
    <div class="mt-20 w-full max-w-lg mx-auto">
      <Header />
    </div>
  );
};

export default Home;

getUser()

getUser()

works as expected and retrieves the user's information. The console.log in routeData() displays user data. Hooray.
How do I get that same data into the component?

useRouteData

useRouteData

doesn't seem to have it, and the

console.log("Render:"...

console.log("Render:"...

seems to be happening well before the

routeData()

routeData()

function has finished.

This is where I think there's a gap in my understanding of how this works. So any insight would be incredible.
Thank you all,

Getting User Info from route page

import { Component } from "solid-js";
import { createServerData$ } from "solid-start/server";
import Header from "~/components/Header";
import { getUser } from "~/lib/session";
import { useRouteData } from "solid-start";

export function routeData() {
  return createServerData$(async (_, event) => {
    const user = await getUser(event.request);
    console.log("Index.tsx", user);
    return {
      user: "",
    };
  });
}

const Home: Component = () => {
  const user = useRouteData<any>();

  console.log("Render:", user);

  return (
    <div class="mt-20 w-full max-w-lg mx-auto">
      <Header />
    </div>
  );
};

export default Home;

import { Component } from "solid-js";
import { createServerData$ } from "solid-start/server";
import Header from "~/components/Header";
import { getUser } from "~/lib/session";
import { useRouteData } from "solid-start";

export function routeData() {
  return createServerData$(async (_, event) => {
    const user = await getUser(event.request);
    console.log("Index.tsx", user);
    return {
      user: "",
    };
  });
}

const Home: Component = () => {
  const user = useRouteData<any>();

  console.log("Render:", user);

  return (
    <div class="mt-20 w-full max-w-lg mx-auto">
      <Header />
    </div>
  );
};

export default Home;

getUser()

getUser()

works as expected and retrieves the user's information. The console.log in routeData() displays user data. Hooray.
How do I get that same data into the component?

useRouteData

useRouteData

doesn't seem to have it, and the

console.log("Render:"...

console.log("Render:"...

seems to be happening well before the

routeData()

routeData()

function has finished.

This is where I think there's a gap in my understanding of how this works. So any insight would be incredible.
Thank you all,

Getting User Info from route page

Similar Threads

Getting User Info from route page

Similar Threads

Similar Threads

Similar Threads