SolidJS•2y ago

how do i use Drizzle?

I'm trying to use Drizzle db on the server only and its giving me "Uncaught TypeError: promisify is not a function" in the browser.

import { cache, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";

const getData = cache(() => {
  return db.query.chat.findMany();
}, "data");

export const route = { load: getData };

export default function Home() {
  const data = createAsync(() => getData());

  return <p>{data()?.length}</p>;
}

import { cache, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";

const getData = cache(() => {
  return db.query.chat.findMany();
}, "data");

export const route = { load: getData };

export default function Home() {
  const data = createAsync(() => getData());

  return <p>{data()?.length}</p>;
}

this is what lib/db looks like

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { migrate } from "drizzle-orm/better-sqlite3/migrator";

export const db = drizzle(new Database("db.sqlite"), { schema });
migrate(db, { migrationsFolder: "drizzle" });

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { migrate } from "drizzle-orm/better-sqlite3/migrator";

export const db = drizzle(new Database("db.sqlite"), { schema });
migrate(db, { migrationsFolder: "drizzle" });

40 Replies

Brendonovich•2y ago

i think you're missing a use server lol, it's trying to run the query on the client

exerciseOP•2y ago

in cache?

Brendonovich•2y ago

yeah

exerciseOP•2y ago

same error

Brendonovich•2y ago

where'd u put it?

exerciseOP•2y ago

import { cache, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";

const getData = cache(() => {
  "use server";
  return db.query.chat.findMany();
}, "data");

export const route = { load: getData };

export default function Home() {
  const data = createAsync(() => getData());

  return <p>{data()?.length}</p>;
}

import { cache, createAsync } from "@solidjs/router";
import { db } from "~/lib/db";

const getData = cache(() => {
  "use server";
  return db.query.chat.findMany();
}, "data");

export const route = { load: getData };

export default function Home() {
  const data = createAsync(() => getData());

  return <p>{data()?.length}</p>;
}

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: { ssr: { external: ["better-sqlite3", "drizzle-orm"] } },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: { ssr: { external: ["better-sqlite3", "drizzle-orm"] } },
});

and i also put this in config didn't work

Brendonovich•2y ago

oh definitely remove those

exerciseOP•2y ago

saw it in prisma example lol https://github.com/solidjs/solid-start/blob/main/examples/with-prisma/app.config.ts

Brendonovich•2y ago

no idea why they do that

exerciseOP•2y ago

removing it didn't fix tho...

Brendonovich•2y ago

try deleting node_modules/.vinxi and restart the dev server, and remove the migrate call

exerciseOP•2y ago

i deleted node_modules/.vinxi, but what is the migrate call? oh in drizzle ok did it, it didn't work

apollo79•2y ago

I had some issues with prisma as well, moving the data functions (cache) to a different file made them go away (make the whole file "use server")

Brendonovich•2y ago

ah you wouldn't want the whole file to be use server if you're calling cache in there but yea a separate file might help

exerciseOP•2y ago

even if i get it work, this is honestly not as straightforward as sveltekit. in sveltekit you keep all your stuff in a file designed for server, +page.server.ts so its much more easy and noob-friendly doing that i got

|- Error: Export from a 'use server' module must be a function

Brendonovich•2y ago

are you doing

const getData = cache(() => {
  "use server";
  return db.query.chat.findMany();
}, "data");

const getData = cache(() => {
  "use server";
  return db.query.chat.findMany();
}, "data");

"use server";

const getData = cache(() => {
  return db.query.chat.findMany();
}, "data");

"use server";

const getData = cache(() => {
  return db.query.chat.findMany();
}, "data");

i'd say this is kinda by design - start & router try to be fairly hands off. you're given primitives to build how you want

exerciseOP•2y ago

"use server";

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { cache } from "@solidjs/router";
import { getCookie } from "vinxi/http";
import { eq } from "drizzle-orm";

export const db = drizzle(new Database("db.sqlite"), { schema });
export const getChat = cache(async () => {
  "use server";

  const cookie = getCookie("chat_session");
  if (!cookie) return null;

  const currChat = await db.query.chat.findFirst({
    where: eq(schema.chat.id, cookie),
  });

  return currChat;
}, "chat");

"use server";

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { cache } from "@solidjs/router";
import { getCookie } from "vinxi/http";
import { eq } from "drizzle-orm";

export const db = drizzle(new Database("db.sqlite"), { schema });
export const getChat = cache(async () => {
  "use server";

  const cookie = getCookie("chat_session");
  if (!cookie) return null;

  const currChat = await db.query.chat.findFirst({
    where: eq(schema.chat.id, cookie),
  });

  return currChat;
}, "chat");

Brendonovich•2y ago

if you're after a simpler (and more stable lol) dx then sveltekit is defs a better option

exerciseOP•2y ago

i'm doing this i like solid because of the <Suspense> and cache architecture

Brendonovich•2y ago

remove the top level use server - you can only use that if all the exports are plain functions

exerciseOP•2y ago

so should i create a getDb function and return the drizzle db?

Brendonovich•2y ago

no just remove the top level use server

exerciseOP•2y ago

ok and then? it doesn't work

Brendonovich•2y ago

what did you do about your original getData function

exerciseOP•2y ago

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { cache } from "@solidjs/router";
import { getCookie } from "vinxi/http";
import { eq } from "drizzle-orm";

export const db = drizzle(new Database("db.sqlite"), { schema });
export const getChat = cache(async () => {
  "use server";

  const cookie = getCookie("chat_session");
  if (!cookie) return null;

  const currChat = await db.query.chat.findFirst({
    where: eq(schema.chat.id, cookie),
  });

  return currChat;
}, "chat");

import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";
import { cache } from "@solidjs/router";
import { getCookie } from "vinxi/http";
import { eq } from "drizzle-orm";

export const db = drizzle(new Database("db.sqlite"), { schema });
export const getChat = cache(async () => {
  "use server";

  const cookie = getCookie("chat_session");
  if (!cookie) return null;

  const currChat = await db.query.chat.findFirst({
    where: eq(schema.chat.id, cookie),
  });

  return currChat;
}, "chat");