#Getting User Info from route page

27 messages · Page 1 of 1 (latest)

maiden summit
#

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;

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 doesn't seem to have it, and the console.log("Render:"... seems to be happening well before the 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,

uneven slate
#

This is only going to show on your index page. I've got mine set up so that there's a user avatar component which renders in the header bar on every page, that then exports the user object to be used by any other page and component on it.

maiden summit
#

How did you do that?

uneven slate
#

Pretty much as it says on the tin. Don't take my example as THE way to do it, I'm still new to how SolidStart operates and have just been using what works while I flesh out an MVP with the understanding I'll go back and refactor with better knowledge later.

screenshot_20221208-154405_Code_-_Insiders_NEKN3ibWT9.png screenshot_20221208-155531_Code_-_Insiders_Ha4S8HLifo.png screenshot_20221208-155943_Code_-_Insiders_1xLZUu9bpa.png
maiden summit
#

Any example helps me learn. Thank you very much!

maiden summit
#

So this is working great, I'm getting user info now:

// src/routes/index.tsx
import { Component } from "solid-js";
import { createServerData$, createServerAction$ } from "solid-start/server";
import { getUser, logout } from "~/lib/session";

export const retrieveUser = () =>
  createServerData$(async (_, { request }) => {
    const user = await getUser(request);
    return user;
  });

const Home: Component = () => {
  const user = retrieveUser();
  const [, signout] = createServerAction$((_, { request }) => logout(request));

  return (
    <div class="mt-20 w-full max-w-lg mx-auto">
      <h1>Hello {user()?.user?.email || "World"}</h1>
      <button
        onClick={async () => {
          console.log("test");
          await signout();
        }}
      >
        Logout
      </button>
      <pre>{JSON.stringify(user() ?? {}, null, 4)}</pre>
    </div>
  );
};

export default Home;

But the button isn't firing when I click it.

#

Is there something I need to do to get buttons working on a page?

stray dagger
maiden summit
#

console.log doesn't show in browser or in console, and none of the logs show up during the signout function, so fairly certain it's never getting there.

#

Basically nothing happens

#

If I extract the <Form> component from createServerData$, and wrap my button in that, it works. Just feels like a pattern I'm not used to yet, I guess.

stray dagger
#

start with why a button does not log test on click.

maiden summit
#

Yeah that's where I'm at. Was just wondering if I was missing something silly like button onclick's don't work on SSR pages or something

stray dagger
#

maybe if there was an error in hydration

maiden summit
#

I'd probably see that in logs somewhere, right?

stray dagger
#

yeah, and then why would the Form works and no the click

#

actually never mind the form works because I think it was designed to work without js

maiden summit
#

oh?

stray dagger
#

for "Progressively Enhanced Form"

#

it seem that the click event was not attached to the button

#

I have an example using createServerAction$ and my button works

maiden summit
#

Can I see it please?

stray dagger
maiden summit
#

Weird, I'll keep looking into what's weird about my instance.

#

Thank you for this

stray dagger
maiden summit
#

Nope