SolidJS•5w ago

Create Effect not executing

the function getName is working fine and shows the name of the person with id 1 after fetching it from my database but this code doesnt log anything to console not even the debug console.log("running") i did :

import { Database } from '~/types';
import { Kysely, PostgresDialect } from 'kysely';
import pkg from 'pg';
import { createEffect, createSignal } from 'solid-js';
const { Pool } = pkg;

const dialect = new PostgresDialect({
  pool: new Pool({
    database: 'db',
    host: 'fakehost',
    user: 'user',
    port: 5432,
    max: 10,
    ssl: true,
    password: 'password123',
    
  }),
});

const db = new Kysely<Database>({
  dialect,
});

async function getName(id: number) {
  const x = await db.selectFrom('person').selectAll().where("id" , "=" , id).execute();
  await console.log(x[0].first_name) //does not execute or show anything
  return x[0].first_name;
}

export default function Myperson() {
  
  //getName(1) runs and log to the console 'Jhon' successfully but
  const [name , setName] = createSignal('Loading...')
  createEffect(() => {
    (async () => {
      console.log("Running") //does not execute or show anything
      const nameResult = await getName(1);
      setName(nameResult);
    })();
  });
  return (
    <div>
      {name()}
    </div>
  );
}

import { Database } from '~/types';
import { Kysely, PostgresDialect } from 'kysely';
import pkg from 'pg';
import { createEffect, createSignal } from 'solid-js';
const { Pool } = pkg;

const dialect = new PostgresDialect({
  pool: new Pool({
    database: 'db',
    host: 'fakehost',
    user: 'user',
    port: 5432,
    max: 10,
    ssl: true,
    password: 'password123',
    
  }),
});

const db = new Kysely<Database>({
  dialect,
});

async function getName(id: number) {
  const x = await db.selectFrom('person').selectAll().where("id" , "=" , id).execute();
  await console.log(x[0].first_name) //does not execute or show anything
  return x[0].first_name;
}

export default function Myperson() {
  
  //getName(1) runs and log to the console 'Jhon' successfully but
  const [name , setName] = createSignal('Loading...')
  createEffect(() => {
    (async () => {
      console.log("Running") //does not execute or show anything
      const nameResult = await getName(1);
      setName(nameResult);
    })();
  });
  return (
    <div>
      {name()}
    </div>
  );
}

6 Replies

Saaa•5w ago

i changed the Myperson function like this and it still didnt work how should i modify the function in order for it to work ?

export default function Myperson() {
  const [name , setName] = createSignal('Loading...')
  setName(getName(1))

  return (
    <div>
      {name()}
    </div>
  );
}

export default function Myperson() {
  const [name , setName] = createSignal('Loading...')
  setName(getName(1))

  return (
    <div>
      {name()}
    </div>
  );
}

it shows undefined (the function is working and logging Jhon this time) it worked this way but I'm pretty sure that this is a low quality code I hope someone would fix it

const [name , setName] = createSignal('Loading...')

async function getName(id: number) {
  const x = await db.selectFrom('person').selectAll().where("id" , "=" , id).execute();
  await console.log(x[0].first_name) 
  await setName(x[0].first_name);
}

export default function Myperson() {
  getName(1);
  return (
    <div>
      {name()}
    </div>
  );
}

const [name , setName] = createSignal('Loading...')

async function getName(id: number) {
  const x = await db.selectFrom('person').selectAll().where("id" , "=" , id).execute();
  await console.log(x[0].first_name) 
  await setName(x[0].first_name);
}

export default function Myperson() {
  getName(1);
  return (
    <div>
      {name()}
    </div>
  );
}

bigmistqke 🌈•5w ago

createResource is your friend when doing async stuff: https://docs.solidjs.com/reference/basic-reactivity/create-resource

export default function Myperson(props) {
  const [name] = createResource(() => props.id, 
   (id) => db.selectFrom('person').selectAll().where("id" , "=" , id).execute()
  )
  return (
    <div>
      {name()}
    </div>
  );
}

export default function Myperson(props) {
  const [name] = createResource(() => props.id, 
   (id) => db.selectFrom('person').selectAll().where("id" , "=" , id).execute()
  )
  return (
    <div>
      {name()}
    </div>
  );
}

if you want to have a loading state: look at <Suspense/> https://docs.solidjs.com/reference/components/suspense

export default function Myperson(props) {
  const [name] = createResource(() => props.id, 
   (id) => db.selectFrom('person').selectAll().where("id" , "=" , id).execute()
  )
  return (
    <div>
      <Suspense fallback="loading...">
        {name()}
      </Suspense>
    </div>
  );
}

export default function Myperson(props) {
  const [name] = createResource(() => props.id, 
   (id) => db.selectFrom('person').selectAll().where("id" , "=" , id).execute()
  )
  return (
    <div>
      <Suspense fallback="loading...">
        {name()}
      </Suspense>
    </div>
  );
}

createResource is a very powerful primitive!

Saaa•5w ago

I tried the following code (with id value 1 to test) but page /myperson shows loading then undefined (even without suspense it doesnt work)

export default function Myperson() {
  const [name] = createResource(() => 
   db.selectFrom('person').selectAll().where("id" , "=" , 1).execute()
  )
  return (
    <div>
      <Suspense fallback="loading...">
        {name()}
      </Suspense>
    </div>
  );
}

export default function Myperson() {
  const [name] = createResource(() => 
   db.selectFrom('person').selectAll().where("id" , "=" , 1).execute()
  )
  return (
    <div>
      <Suspense fallback="loading...">
        {name()}
      </Suspense>
    </div>
  );
}

bigmistqke 🌈•5w ago

Can u log the result in an effect? Like createEffect(() => console.log(name()))

REEEEE•5w ago

Is this a solid start project?

bigmistqke 🌈•5w ago

True, should that db-call happen on the server? I m unfamiliar w kysely

Gaming

Programming

Create Effect not executing