S
SolidJS•3mo ago
jesseb34r

how to use solid router with tauri and a sqlite database

I am making a Tauri app that has a pretty basic database to hold lists and projects created by the user. I currently have a singleton database class with functions for database actions like this: 
import Database from "@tauri-apps/plugin-sql"

export class MyDB {
  private static instance: MyDB | null = null;
  private db: Database;

  private constructor(db: Database) {
    this.db = db;
  }

  static async db(): Promise<MyDB> {
    if (!MyDB.instance) {
      const db = await Database.load("sqlite:data.db");
      MyDB.instance = new MyDB(db);
    }
    return MyDB.instance;
   }

  // DB actions
  async create_project(name: string): Promise<number> {
    const result = this.db.execute(
      "INSERT INTO projects (name) VALUES (?)",
      name,
    }
    if (result.lastInsertId !== undefined) {
      return result.lastInsertId;
    } else {
      throw new Error("Failed to get last insert ID");
    }
  }
  //... rest of actions
}
import Database from "@tauri-apps/plugin-sql"

export class MyDB {
  private static instance: MyDB | null = null;
  private db: Database;

  private constructor(db: Database) {
    this.db = db;
  }

  static async db(): Promise<MyDB> {
    if (!MyDB.instance) {
      const db = await Database.load("sqlite:data.db");
      MyDB.instance = new MyDB(db);
    }
    return MyDB.instance;
   }

  // DB actions
  async create_project(name: string): Promise<number> {
    const result = this.db.execute(
      "INSERT INTO projects (name) VALUES (?)",
      name,
    }
    if (result.lastInsertId !== undefined) {
      return result.lastInsertId;
    } else {
      throw new Error("Failed to get last insert ID");
    }
  }
  //... rest of actions
}
and then I have been calling this in my components by doing something like this: 
async function handle_new_project(name: string): number {
  const db = MyDB.db();
  const project_id = await db.create_project(name);
  return project_id;
}
async function handle_new_project(name: string): number {
  const db = MyDB.db();
  const project_id = await db.create_project(name);
  return project_id;
}
This has worked so far but I feel like there has got to be a way to use solid router functions like createAsync, action, and query to do this better but I am not really familiar with these at all. How can I set this stuff up to have better usage in my components? Right now, I'm hitting some complications trying to have a list of projects that I fetch and display with a <For each={projects} /> but I can't figure out how to do refetching and stuff in a good way.
1 Reply
Madaxen86
Madaxen86•3mo ago
The code you’ve posted would remain mostly the same. With query you can wrap your getter functions and call them inside a component e.g. 
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";

type User = { name: string; email: string };

const getUsers = query(async () => {
  const response = await fetch("https://example.com/users");
  return (await response.json()) as User[];
}, "users");

export default function Page() {
  const users = createAsync(() => getUsers());

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}
import { For } from "solid-js";
import { createAsync, query } from "@solidjs/router";

type User = { name: string; email: string };

const getUsers = query(async () => {
  const response = await fetch("https://example.com/users");
  return (await response.json()) as User[];
}, "users");

export default function Page() {
  const users = createAsync(() => getUsers());

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}
For mutations you do the same with actions. Wrap the wrapper function and then use useAction and call it in an event handler. Use one of the response helpers to revalidate and refetch affected queries. E.g. 
// anywhere
const myAction = action(async (data) => {
  await doMutation(data);
  throw redirect("/", { revalidate: [getUser.keyFor(data.id), getUsers.key ]}); // throw a response to do a redirect
});
// anywhere
const myAction = action(async (data) => {
  await doMutation(data);
  throw redirect("/", { revalidate: [getUser.keyFor(data.id), getUsers.key ]}); // throw a response to do a redirect
});
Other response helpers on this page and the following ones https://docs.solidjs.com/solid-router/reference/response-helpers/json
json -
Documentation for SolidJS, the signals-powered UI framework

Did you find this page helpful?