SolidJS•3y ago

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() 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,

19 Replies

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

How did you do that?

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

Any example helps me learn. Thank you very much! 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;

// 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?

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

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.

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

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

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

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

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

oh?

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

Can I see it please?

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

Weird, I'll keep looking into what's weird about my instance. Thank you for this

Unknown User•3y ago

Message Not Public

PridgeyOP•3y ago

Nope

Unknown User•3y ago

Message Not Public

Gaming

Programming

Getting User Info from route page

Did you find this page helpful?