Hussein Posts - Answer Overflow

Hussein

Explore posts from servers

•Created by Hussein on 10/17/2024 in #support

is there a way to start data fetching before component rendering?

react router runs the loader before the component. thus making things like redirects easier. is there a way to do this with @solidjs/router?

export const routes = createRoutesFromElements(
  <>
    <Route
      loader={() => Response.redirect("/other")}
      path="/"
      element={<Home />}
    />
    <Route path="/other" element={<Other />} />
  </>
);

export const routes = createRoutesFromElements(
  <>
    <Route
      loader={() => Response.redirect("/other")}
      path="/"
      element={<Home />}
    />
    <Route path="/other" element={<Other />} />
  </>
);

24 replies

SSolidJS

•Created by Hussein on 9/27/2024 in #support

submission error doesn't show when js is disabled

export default function Home() {
  const form = useSubmission(login);

  return (
    <Show when={form.error}>
      {(error: Accessor<Error>) => <p>{error().message}</p>}
    </Show>
  );
}

export default function Home() {
  const form = useSubmission(login);

  return (
    <Show when={form.error}>
      {(error: Accessor<Error>) => <p>{error().message}</p>}
    </Show>
  );
}

why this doesn't work with js disabled? this is a "use server" action. form.result shows when js disabled but not form.error.

9 replies

SSolidJS

•Created by Hussein on 8/28/2024 in #support

why solidstart production build contains many references to source code?

1 replies

SSolidJS

•Created by Hussein on 8/22/2024 in #support

how to redirect in a "use server" function?

is there a way to redirect outside of cache, action and without useNavigate?

async function redirect() {
  "use server";
  // how??
  redirect("/other");
}

async function redirect() {
  "use server";
  // how??
  redirect("/other");
}

2 replies

SSolidJS

•Created by Hussein on 8/22/2024 in #support

isDev is false in dev

import { isDev } from "solid-js/web";
console.log({ isDev });

import { isDev } from "solid-js/web";
console.log({ isDev });

this logs false in dev. why? i'm using solidstart

5 replies

SSolidJS

•Created by Hussein on 8/22/2024 in #support

Race condition

i have a login page with a login action like this:

const login = action(async (formData: FormData) => {
  ("use server");
  const username = formData.get("username");
  const password = formData.get("password");
  if (typeof username === "string" && typeof password === "string") {
    const foundUser = await db.query.user.findFirst({
      where: eq(user.username, username),
    });

    if (!foundUser || !(await verify(foundUser.password, password)))
      return new Error("Wrong username or password");

    const session = await lucia.createSession(foundUser.id, {});
    const sessionCookie = lucia.createSessionCookie(session.id);

    setCookie(
      sessionCookie.name,
      sessionCookie.value,
      sessionCookie.attributes
    );
    // this is happening before the cookie gets set
    throw redirect("/");
  }
}, "login");

const login = action(async (formData: FormData) => {
  ("use server");
  const username = formData.get("username");
  const password = formData.get("password");
  if (typeof username === "string" && typeof password === "string") {
    const foundUser = await db.query.user.findFirst({
      where: eq(user.username, username),
    });

    if (!foundUser || !(await verify(foundUser.password, password)))
      return new Error("Wrong username or password");

    const session = await lucia.createSession(foundUser.id, {});
    const sessionCookie = lucia.createSessionCookie(session.id);

    setCookie(
      sessionCookie.name,
      sessionCookie.value,
      sessionCookie.attributes
    );
    // this is happening before the cookie gets set
    throw redirect("/");
  }
}, "login");

and an index page that checks the user:

const getUser = cache(async () => {
  "use server";

  const sessionId = getCookie(lucia.sessionCookieName);

  if (!sessionId) throw redirect("/login");
  const { user } = await lucia.validateSession(sessionId);

  if (!user) throw redirect("/login");

  return user;
}, "user");

export const route = {
  load: () => getUser(),
};

const getUser = cache(async () => {
  "use server";

  const sessionId = getCookie(lucia.sessionCookieName);

  if (!sessionId) throw redirect("/login");
  const { user } = await lucia.validateSession(sessionId);

  if (!user) throw redirect("/login");

  return user;
}, "user");

export const route = {
  load: () => getUser(),
};

when /login redirects to / after submitting the action, somehow / doesn't have the new cookie.

9 replies

SSolidJS

•Created by Hussein on 7/6/2024 in #support

is this a good pattern?

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <Suspense>{shouldRedirect() && <Navigate href="/login" />}</Suspense>;
}

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <Suspense>{shouldRedirect() && <Navigate href="/login" />}</Suspense>;
}

32 replies

SSolidJS

•Created by Hussein on 7/5/2024 in #support

how do i dedupe requests without `cache`?

i tried everything. it always calls the function either twice or even thrice on client, after the server fetching the data too.

45 replies

SSolidJS

•Created by Hussein on 7/3/2024 in #support

is there a way to disable default lazy loading for routes in solidstart?

it seems routes are download when a link to them is clicked and then cached. is there a way to just download all routes on any route like solid spa?

21 replies

SSolidJS

•Created by Hussein on 6/30/2024 in #support

how to create brotli files when building?

vinxi build is only creating gz files

6 replies

SSolidJS

•Created by Hussein on 6/25/2024 in #support

Error: Cannot find cache context

SSR:

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const get = cache(async () => {
            const res = await fetch(
              "https://jsonplaceholder.typicode.com/todos/1"
            );
            return res.json();
          }, "data");

          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const get = cache(async () => {
            const res = await fetch(
              "https://jsonplaceholder.typicode.com/todos/1"
            );
            return res.json();
          }, "data");

          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

92 replies

SSolidJS

•Created by Hussein on 5/27/2024 in #support

is hmr broken? or is this intentional?

create new solid start project run dev command change text in index.tsx route it does a full refresh 🤔

8 replies

SSolidJS

•Created by Hussein on 5/26/2024 in #support

how to return a 404 error in `cache`?

how to do something like https://kit.svelte.dev/docs/errors#expected-errors ?

4 replies

SSolidJS

•Created by Hussein on 5/23/2024 in #support

declare types for locals?

i need to declare some locals for RequestEvent

import { User } from "lucia";

declare module "@solidjs/start" {
  export interface RequestEventLocals {
    user?: User;
  }
}

import { User } from "lucia";

declare module "@solidjs/start" {
  export interface RequestEventLocals {
    user?: User;
  }
}

that didn't work

7 replies

SSolidJS

•Created by Hussein on 5/21/2024 in #support

how to load data on link hover?

is there a way to preload data on link hover? <Router preload> didn't do anything.

3 replies

SSolidJS

•Created by Hussein on 5/21/2024 in #support

how do i redirect on load?

i did this

export const route = {
  load: async () => {
    "use server";
    const cookie = getCookie("chat_session");
    if (!cookie) throw redirect("/");
  },
};

export const route = {
  load: async () => {
    "use server";
    const cookie = getCookie("chat_session");
    if (!cookie) throw redirect("/");
  },
};

this is not working

26 replies

SSolidJS

•Created by Hussein on 5/21/2024 in #support

how do i use Drizzle?

I'm trying to use Drizzle db on the server only and its giving me "Uncaught TypeError: promisify is not a function" in the browser.

import { cache, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";

const getData = cache(() => {
  return db.query.chat.findMany();
}, "data");

export const route = { load: getData };

export default function Home() {
  const data = createAsync(() => getData());

  return <p>{data()?.length}</p>;
}

import { cache, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";

const getData = cache(() => {
  return db.query.chat.findMany();
}, "data");

export const route = { load: getData };

export default function Home() {
  const data = createAsync(() => getData());

  return <p>{data()?.length}</p>;
}

this is what lib/db looks like

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { migrate } from "drizzle-orm/better-sqlite3/migrator";

export const db = drizzle(new Database("db.sqlite"), { schema });
migrate(db, { migrationsFolder: "drizzle" });

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { migrate } from "drizzle-orm/better-sqlite3/migrator";

export const db = drizzle(new Database("db.sqlite"), { schema });
migrate(db, { migrationsFolder: "drizzle" });

68 replies

SSolidJS

•Created by Hussein on 5/20/2024 in #support

How do i conditionally add something to <head> based on what createAsync returns?

I need to wait for a resource coming from createAsync so then i can decide whether i should add google recaptcha to <head> using useHead from @solidjs/meta

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  if (!chat())
    useHead({
      tag: "script",
      id: "recaptcha",
      setting: { close: true },
      props: {
        src: "https://www.google.com/recaptcha/api.js",
        async: true,
        defer: true,
      },
    });

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  if (!chat())
    useHead({
      tag: "script",
      id: "recaptcha",
      setting: { close: true },
      props: {
        src: "https://www.google.com/recaptcha/api.js",
        async: true,
        defer: true,
      },
    });

69 replies

SSolidJS

•Created by Hussein on 5/2/2024 in #support

how to use bun:sqlite without it leaking to the browser?

I'm using a Drizzle DB. how do i initialize it and use it in a route file in solid start?

12 replies

SSolidJS

•Created by Hussein on 4/20/2024 in #support

Conditionally redirect based on resource result?

i'm fetching the logged in user using this:

const [user] = createResource(async () => {
  const me = await trpc.me.query();
  return me;
});

const [user] = createResource(async () => {
  const me = await trpc.me.query();
  return me;
});

how do i redirect based on whether if user is null to /login page using @solidjs/router?

7 replies

Gaming

Programming