S
SolidJS

support

createResource doesn't rerun when passed store changes

Wwonrax7/27/2023
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>
);
}

Looking for more? Join the community!