Eddie
Eddie
Explore posts from servers
SSolidJSDTDrizzle Team
PostsComments
SSolidJS
Created by Eddie on 1/31/2025 in #support
Hydration error when using <Show> in SolidStart
Wrapping the <Show> in a <Suspense> seems to fix the issue for me. That led me to adding the suspense tag in the app.tsx file: 
export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>Tiiitle</Title>
          <div class="min-h-screen flex flex-col">
            <Suspense>{props.children}</Suspense>
            <div class="mt-auto">
              <Suspense>
                <Footer />
              </Suspense>
            </div>
          </div>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>Tiiitle</Title>
          <div class="min-h-screen flex flex-col">
            <Suspense>{props.children}</Suspense>
            <div class="mt-auto">
              <Suspense>
                <Footer />
              </Suspense>
            </div>
          </div>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
And I don't longer need to have the suspense in the footer component. So, I guess I learned that everything async requires a suspense somewhere up the component tree.
12 replies
SSolidJS
Created by Eddie on 1/31/2025 in #support
Hydration error when using <Show> in SolidStart
No I believe not, I just use it like this. 
export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>Tiiitle</Title>
          <div class="min-h-screen flex flex-col">
            <Suspense>{props.children}</Suspense>
            <div class="mt-auto">
              <Footer />
            </div>
          </div>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>Tiiitle</Title>
          <div class="min-h-screen flex flex-col">
            <Suspense>{props.children}</Suspense>
            <div class="mt-auto">
              <Footer />
            </div>
          </div>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}
12 replies
SSolidJS
Created by Eddie on 1/31/2025 in #support
Hydration error when using <Show> in SolidStart
I got caught up in other things and just got back to this. Giving it another shot ❤️ 
import { query } from "@solidjs/router";
import { getUser } from "~/lib/serverFunctions";

export const getUserQuery = query(getUser, "userSession");
import { query } from "@solidjs/router";
import { getUser } from "~/lib/serverFunctions";

export const getUserQuery = query(getUser, "userSession");
"use server";

import { redirect } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";
import { auth } from "~/lib/auth";

export async function getUser(options: {
  redirectToIfExists?: string;
  redirectToIfNotExists?: string;
}) {
  const { redirectToIfExists, redirectToIfNotExists } = options;

  const event = getRequestEvent();
  const headers = event?.request.headers;

  if (!headers) {
    throw new Error("Headers not available");
  }

  const userSession = await auth.api.getSession({ headers });

  if (userSession?.user && redirectToIfExists) {
    console.log(`--> Found user; Redirecting: ${redirectToIfExists}`);
    throw redirect(redirectToIfExists);
  }

  if (!userSession?.user && redirectToIfNotExists) {
    console.log(`--> No user found; Redirecting: ${redirectToIfNotExists}`);
    throw redirect(redirectToIfNotExists);
  }

  if (!userSession || !userSession.user) {
    return null;
  }

  return userSession.user;
}
"use server";

import { redirect } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";
import { auth } from "~/lib/auth";

export async function getUser(options: {
  redirectToIfExists?: string;
  redirectToIfNotExists?: string;
}) {
  const { redirectToIfExists, redirectToIfNotExists } = options;

  const event = getRequestEvent();
  const headers = event?.request.headers;

  if (!headers) {
    throw new Error("Headers not available");
  }

  const userSession = await auth.api.getSession({ headers });

  if (userSession?.user && redirectToIfExists) {
    console.log(`--> Found user; Redirecting: ${redirectToIfExists}`);
    throw redirect(redirectToIfExists);
  }

  if (!userSession?.user && redirectToIfNotExists) {
    console.log(`--> No user found; Redirecting: ${redirectToIfNotExists}`);
    throw redirect(redirectToIfNotExists);
  }

  if (!userSession || !userSession.user) {
    return null;
  }

  return userSession.user;
}
12 replies
SSolidJS
Created by Eddie on 1/31/2025 in #support
Hydration error when using <Show> in SolidStart
I tried a fresh browser session, it did not help. I have been banging my head against this for some time now and can't figure it out, I ended up doing it this way, which works: 
export function Footer() {
  const user = createAsync(() => getUserQuery({}), { deferStream: true });

  const [hasUser, setHasUser] = createSignal(false);

  createEffect(() => {
    if (user()) {
      setHasUser(true);
    }
  });

  return (
    <footer>
      <Show when={hasUser()} fallback={<div>User not logged in..</div>}>
        {() => {
          return <div>Logged in</div>;
        }}
      </Show>
    </footer>
  );
}
export function Footer() {
  const user = createAsync(() => getUserQuery({}), { deferStream: true });

  const [hasUser, setHasUser] = createSignal(false);

  createEffect(() => {
    if (user()) {
      setHasUser(true);
    }
  });

  return (
    <footer>
      <Show when={hasUser()} fallback={<div>User not logged in..</div>}>
        {() => {
          return <div>Logged in</div>;
        }}
      </Show>
    </footer>
  );
}
If, in the above example, I replace hasUser() with user() in the when clause, I get the hydration error again. I would have preferred to put the user() directly in the when clause, and I am still wondering if I should have been able to.
12 replies
SSolidJS
Created by Eddie on 1/31/2025 in #support
Hydration error when using <Show> in SolidStart
In my case, the resource user is preloaded on the route that in turn renders this component, so I assume that when the Footer component function runs, it is already a fulfilled promise. - Does this mean that deferStream: true will have no effect here? - Why, if user() is fulfilled when this component mounts, is the when clause in the <Show> not making the content of the <Show> not render on mount (and in turn not cause hydration error because the element is there from the get-go)?
12 replies
SSolidJS
Created by Eddie on 1/31/2025 in #support
Hydration error when using <Show> in SolidStart
That does not solve the issue, unfortunately.
12 replies