wonrax Posts - Answer Overflow

wonrax

Posts Comments

SSolidJS

•Created by wonrax on 9/18/2023 in #support

Difference between `setState` and `produce`?

12 replies

SSolidJS

•Created by wonrax on 7/27/2023 in #support

createResource doesn't rerun when passed store changes

Am I using this correctly? Ryan said it should work when wrapped in a function: https://github.com/solidjs/solid/discussions/902 But it won't work for my case, maybe it's because the store is passed down from parent component? The text inside <h1> does change but the table content does not and createResource only gets called on start up.

const App: Component = () => {
  const [appState, setAppState] = createStore<AppState>({});
  return <TableView
        table={appState.selectedTable}
        connection={appState.connection!}
      />
}

const App: Component = () => {
  const [appState, setAppState] = createStore<AppState>({});
  return <TableView
        table={appState.selectedTable}
        connection={appState.connection!}
      />
}

const TableView: Component<{
  table?: DatabaseTable;
  connection: DatabaseConnection;
  class?: string;
}> = (props) => {

  const [tableData] = createResource(
    () => props.table,
    async (table) => {
      console.log("table changed");
      if (!table) return;
      const res: TableData = await window.api.sendSqlQuery(
        `SELECT * FROM ${table.schema}.${table.tableName} LIMIT 40`,
        {
          host: props.connection.host,
          port: props.connection.port,
          user: props.connection.user,
          password: props.connection.password,
          database: props.connection.database,
        }
      );
      return res;
    }
  );
  ...
  return (
    <Show when={tableData() && props.table}>
      <h1 class="text-xl font-medium p-4">{props.table!.tableName}</h1>
      <DataTable data={tableData()!} />
    </Show>
  );
}

const TableView: Component<{
  table?: DatabaseTable;
  connection: DatabaseConnection;
  class?: string;
}> = (props) => {

  const [tableData] = createResource(
    () => props.table,
    async (table) => {
      console.log("table changed");
      if (!table) return;
      const res: TableData = await window.api.sendSqlQuery(
        `SELECT * FROM ${table.schema}.${table.tableName} LIMIT 40`,
        {
          host: props.connection.host,
          port: props.connection.port,
          user: props.connection.user,
          password: props.connection.password,
          database: props.connection.database,
        }
      );
      return res;
    }
  );
  ...
  return (
    <Show when={tableData() && props.table}>
      <h1 class="text-xl font-medium p-4">{props.table!.tableName}</h1>
      <DataTable data={tableData()!} />
    </Show>
  );
}

1 replies

Gaming

Programming