𝔐𝔞𝔱𝔱𝔦𝔫 Posts

𝔐𝔞𝔱𝔱𝔦𝔫

Explore posts from servers

CC#SSolidJS SIASapphire - Imagine a framework

•Created by 𝔐𝔞𝔱𝔱𝔦𝔫 on 7/5/2024 in #support

Why is this not reactive? (using signal + html open attribute)

I have the following code:

const [openMenu, setOpenMenu] = createSignal<boolean>(false);

<details
  class='dropdown'
  onclick={() => setOpenMenu(!openMenu())}
  open={openMenu()}
>

const [openMenu, setOpenMenu] = createSignal<boolean>(false);

<details
  class='dropdown'
  onclick={() => setOpenMenu(!openMenu())}
  open={openMenu()}
>

Why is this not reactive? I need to click twice to actually show the menu. But then I cannot even close it anymore. Am I missing something here?

22 replies

SSolidJS

•Created by 𝔐𝔞𝔱𝔱𝔦𝔫 on 7/1/2024 in #support

Page content not updating on route change

I have the following page:

import { createAsync, useParams, type RouteDefinition } from '@solidjs/router';
import { Show, Suspense } from 'solid-js';
import { getInformationById } from '~/api';

export const route = {} satisfies RouteDefinition;

export default function InformationPage() {
  const params = useParams();
  const informationId = parseInt(params.id);
  const information = createAsync(async () => getInformationById(informationId), {
    deferStream: true,
  });

  return (
    <main class='w-full p-4 space-y-2'>
      <Suspense fallback={<p>Loading...</p>}>
        <Show when={information()} fallback={<p>Loading...</p>}>
          {(information) => (
            <>
              <h1>{information().name}</h1>
            </>
          )}
        </Show>
      </Suspense>
    </main>
  );
}

import { createAsync, useParams, type RouteDefinition } from '@solidjs/router';
import { Show, Suspense } from 'solid-js';
import { getInformationById } from '~/api';

export const route = {} satisfies RouteDefinition;

export default function InformationPage() {
  const params = useParams();
  const informationId = parseInt(params.id);
  const information = createAsync(async () => getInformationById(informationId), {
    deferStream: true,
  });

  return (
    <main class='w-full p-4 space-y-2'>
      <Suspense fallback={<p>Loading...</p>}>
        <Show when={information()} fallback={<p>Loading...</p>}>
          {(information) => (
            <>
              <h1>{information().name}</h1>
            </>
          )}
        </Show>
      </Suspense>
    </main>
  );
}

I navigate using this, which works for any other route, as it seems:

<a
  href={'/information/' + information.id}
  onclick={doSomeOtherStuff}
>

<a
  href={'/information/' + information.id}
  onclick={doSomeOtherStuff}
>

If any other information are needed, please @ me.

7 replies

SSolidJS

•Created by 𝔐𝔞𝔱𝔱𝔦𝔫 on 6/30/2024 in #support

AggregateError on accessing my db with drizzle-orm and supabase

/src/api/db.ts

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';

const connectionString = process.env.DATABASE_URL;

const client = postgres(connectionString!, { prepare: false });
export const db = drizzle(client);

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';

const connectionString = process.env.DATABASE_URL;

const client = postgres(connectionString!, { prepare: false });
export const db = drizzle(client);

/src/api/index.ts

import { cache } from "@solidjs/router";
import { getSeasons as gS } from "./server";

export const getSeasons = cache(gS, "seasons");

import { cache } from "@solidjs/router";
import { getSeasons as gS } from "./server";

export const getSeasons = cache(gS, "seasons");

/src/api/server.ts

"use server";

import { season } from "../../drizzle/schema";
import { db } from "./db";

export const getSeasons = async () => {
    return await db.select().from(season);
};

"use server";

import { season } from "../../drizzle/schema";
import { db } from "./db";

export const getSeasons = async () => {
    return await db.select().from(season);
};

/src/routes/index.tsx

import { createAsync, type RouteDefinition } from '@solidjs/router';
import { For } from 'solid-js';
import { getSeasons } from '~/api/server';

export const route = {} satisfies RouteDefinition;

export default function Home() {
  const seasons = createAsync(async () => getSeasons(), { deferStream: true });

  return (
    <main class='w-full p-4 space-y-2'>
      <h3 class='font-bold text-xl'>Hello world!</h3>
      <For each={seasons()}>{(season) => <p>{season.title}</p>}</For>
    </main>
  );
}

import { createAsync, type RouteDefinition } from '@solidjs/router';
import { For } from 'solid-js';
import { getSeasons } from '~/api/server';

export const route = {} satisfies RouteDefinition;

export default function Home() {
  const seasons = createAsync(async () => getSeasons(), { deferStream: true });

  return (
    <main class='w-full p-4 space-y-2'>
      <h3 class='font-bold text-xl'>Hello world!</h3>
      <For each={seasons()}>{(season) => <p>{season.title}</p>}</For>
    </main>
  );
}

I have a supabase db with a table called seasons. I want to access all seasons (for now inside index.tsx, but later also in the app.tsx) and display them. But this doesn't work and only display an AggregateError :/

4 replies

Gaming

Programming