DT
Drizzle Team•2w ago
hyperknot

How to use in browser environment?

Hi, I'm trying to use Drizzle ORM in browser with wa-sqlite, a SQLite WASM lib. There are no drivers for it. How can I use it? I made my db execute function, which takes an sql string and a params array which I can basically call from Drizzle query builder / sql tag. I mean the output of these: 
import { eq, sql } from 'drizzle-orm'

import { integer, QueryBuilder, sqliteTable, text } from 'drizzle-orm/sqlite-core'
import { SQLiteSyncDialect } from 'drizzle-orm/sqlite-core/dialect'

const users = sqliteTable('users', {
  id: integer('id').primaryKey(),
  fullName: text('full_name'),
  email: text('email').notNull(),
})

// --- query builder

const qb = new QueryBuilder()

const qbQuery = qb.select().from(users).where(eq(users.email, '[email protected]'))

const { sql: qbSQL, params: qbParams } = qbQuery.toSQL()

console.log('SQL (QueryBuilder):', qbSQL)
console.log('Params (QueryBuilder):', qbParams)

// --- sql tag

const tagQuery = sql`SELECT ${users.id}, ${users.fullName} FROM ${users} WHERE ${users.email} = ${'[email protected]'}`

const dialect = new SQLiteSyncDialect()

const { sql: tagSql, params: tagParams } = dialect.sqlToQuery(tagQuery)

console.log('SQL (sql tag):', tagSql)
console.log('Params (sql tag):', tagParams)
import { eq, sql } from 'drizzle-orm'

import { integer, QueryBuilder, sqliteTable, text } from 'drizzle-orm/sqlite-core'
import { SQLiteSyncDialect } from 'drizzle-orm/sqlite-core/dialect'

const users = sqliteTable('users', {
  id: integer('id').primaryKey(),
  fullName: text('full_name'),
  email: text('email').notNull(),
})

// --- query builder

const qb = new QueryBuilder()

const qbQuery = qb.select().from(users).where(eq(users.email, '[email protected]'))

const { sql: qbSQL, params: qbParams } = qbQuery.toSQL()

console.log('SQL (QueryBuilder):', qbSQL)
console.log('Params (QueryBuilder):', qbParams)

// --- sql tag

const tagQuery = sql`SELECT ${users.id}, ${users.fullName} FROM ${users} WHERE ${users.email} = ${'[email protected]'}`

const dialect = new SQLiteSyncDialect()

const { sql: tagSql, params: tagParams } = dialect.sqlToQuery(tagQuery)

console.log('SQL (sql tag):', tagSql)
console.log('Params (sql tag):', tagParams)
Is this correct like this? I mean I made a function executeQuery(selectSQL, selectParams) which takes those exact outputs and it works. I have some questions: 1. Do I understand correctly, that for create table statements, I need drizzle-kit and it's not compatible with browser envs? 2. Is it difficult to make a driver out of this? I mean it's a standard sqlite dialect. Can I tweak an existing driver to call my executeQuery? 3. What are the workaroiunds for using drizzle-kit / migrations with browser? I was thinking generating migrations files in a folder and just fetching those in the browser. I mean raw SQL statements. Would that work?
2 Replies
TOSL
TOSL•7d ago
Best option is to create the driver yourself. They are pretty easy to add.
hyperknot
hyperknotOP•6d ago
I think that'll be the plan I take.

Did you find this page helpful?