{"id":2708,"date":"2024-06-17T05:28:41","date_gmt":"2024-06-17T11:28:41","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2708"},"modified":"2024-06-17T05:28:42","modified_gmt":"2024-06-17T11:28:42","slug":"introducing-drizzle","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/introducing-drizzle\/","title":{"rendered":"Introducing Drizzle"},"content":{"rendered":"\n

This is a post about an exciting new ORM tool (that’s “object relational mapper”) that is different than any ORM I’ve used before\u2014and I’ve used quite a few! Spoiler: it’s Drizzle<\/a>. <\/p>\n\n\n\n

Wait, what’s an ORM?<\/h2>\n\n\n\n

Even if you’re using a non-relational database now (think MongoDB or Redis), sooner or later you’ll likely need a relational DB. <\/p>\n\n\n\n

Knowing SQL is an essential skill for any software engineer, but writing SQL directly can be tricky! The tooling is usually primitive, with only minimal auto-complete to guide you, and you invariably go through a process of running your query, correcting errors, and repeating until you get it right.<\/p>\n\n\n\n

ORMs try to help you with this process of crafting SQL. Typically, you tell the ORM about the shape of your DB and it exposes APIs to do typical things. If you have a books<\/code> table in your DB, an ORM will give you an API for it where you can do stuff like:<\/p>\n\n\n

const<\/span> longBooks = books.find({ pages<\/span>: { gt<\/span>: 500<\/span> } });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Behind the scenes, the SQL created might be something like:<\/p>\n\n\n
SELECT<\/span> * FROM<\/span> books WHERE<\/span> pages > 500<\/span>;<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
That may not look like a massive simplification, but as the parameters get more complex or strung together, the SQL can get a bit mindbending. Not to mention the ORM keeps that code in a language you’re likely already using, like JavaScript.<\/p>\n\n\n\n
Why Drizzle is Different<\/h2>\n\n\n\n
Drizzle takes a novel approach. Drizzle\u00a0does<\/em>\u00a0provide you a traditional ORM querying API, like we saw above. But in addition to that, it\u00a0also<\/em>\u00a0provides an API that is essentially a layer of typing on top of SQL itself. So rather than what we saw before, we might query our books table like this<\/p>\n\n\n
const<\/span> longBooks = await<\/span> db\n  .select()\n  .from(books)\n  .where(gt(books.pages, 500<\/span>));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
It’s more lines, but it’s closer to actual SQL, which provides us some nice benefits: it’s easier to learn, more flexible, and avoids traditional ORM footguns.<\/p>\n\n\n\n
Using Drizzle in general, and some of the advanced things we’ll cover in this post requires a decent knowledge of SQL. If you’ve never, ever used SQL, you might struggle with a few of the things we discuss later on. That’s expected. Skim and jump over sections as needed. If nothing else, hopefully this post will motivate you to look at SQL.<\/p>\n\n\n\n
Setting up the Schema<\/h2>\n\n\n\n
Drizzle can’t do much of anything if it doesn’t know about your database. There’s lots of utilities for showing Drizzle the structure (or schema) of your tables. We’ll take a very brief look, but a more complete example can be found here<\/a>.<\/p>\n\n\n\n
Drizzle supports Postgres, MySQL, and SQLite. The ideas are the same either way, but we’ll be using MySQL.<\/p>\n\n\n\n
Let’s start to set up a table.<\/p>\n\n\n
import<\/span> { int, json, mysqlTable, varchar } from<\/span> \"drizzle-orm\/mysql-core\"<\/span>;\n\nexport<\/span> const<\/span> books = mysqlTable(\"books\"<\/span>, {\n  id<\/span>: int(\"id\"<\/span>).primaryKey().autoincrement(),\n  userId<\/span>: varchar(\"userId\"<\/span>, { length<\/span>: 50<\/span> }).notNull(),\n  isbn<\/span>: varchar(\"isbn\"<\/span>, { length<\/span>: 25<\/span> }),\n  pages<\/span>: int(\"pages\"<\/span>),\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
We tell Drizzle about our columns (we won\u2019t show all of them here), and their data types.<\/p>\n\n\n\n
Now we can run queries:<\/p>\n\n\n
const<\/span> result = await<\/span> db\n  .select()\n  .from(books)\n  .orderBy(desc(books.id))\n  .limit(1<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This query returns an array of items which match the schema we provided Drizzle for this table.<\/p>\n\n\n\n
\"First<\/figure>\n\n\n\n
Alternatively, as expected, we can also narrow our select list.<\/p>\n\n\n
const<\/span> result = await<\/span> db\n  .select({ id<\/span>: books.id, isbn<\/span>: books.isbn })\n  .from(books)\n  .orderBy(desc(books.id))\n  .limit(1<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that the types of the columns match whatever we define in the schema. We won’t go over every possible column type (check the docs), but let’s briefly look at the JSON type:<\/p>\n\n\n
export<\/span> const<\/span> books = mysqlTable(\"books\"<\/span>, {\n  id<\/span>: int(\"id\"<\/span>).primaryKey().autoincrement(),\n  userId<\/span>: varchar(\"userId\"<\/span>, { length<\/span>: 50<\/span> }).notNull(),\n  isbn<\/span>: varchar(\"isbn\"<\/span>, { length<\/span>: 25<\/span> }),\n  pages<\/span>: int(\"pages\"<\/span>),\n  authors<\/span>: json(\"authors\"<\/span>),\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This adds an authors field to each book. But the type might not be what you want. Right now it’s unknown<\/code>. This makes sense: JSON can have just about any structure. Fortunately, if you know your json<\/code> column will have a predictable shape, you can specify it, like this:\u00a0\u00a0<\/p>\n\n\n
export<\/span> const<\/span> books = mysqlTable(\"books\"<\/span>, {\n<\/span><\/span>  id<\/span>: int(\"id\"<\/span>).primaryKey().autoincrement(),\n<\/span><\/span>  userId<\/span>: varchar(\"userId\"<\/span>, { length<\/span>: 50<\/span> }).notNull(),\n<\/span><\/span>  isbn<\/span>: varchar(\"isbn\"<\/span>, { length<\/span>: 25<\/span> }),\n<\/span><\/span>  pages<\/span>: int(\"pages\"<\/span>),\n<\/span><\/span>  authors<\/span>: json(\"authors\"<\/span>).$type<string[]>(),\n<\/span><\/mark>});\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
And now, when we check, the authors<\/code> property is of type string[] | null<\/code>.<\/p>\n\n\n\n
\"Typed<\/figure>\n\n\n\n
If you were to mark the authors<\/code> column as notNull()<\/code> it would be typed as string[]<\/code>. As you might expect, you can pass any type you’d like into the $type<\/code> helper.<\/p>\n\n\n\n
Query Whirlwind Tour<\/h2>\n\n\n\n
Let’s run a non-trivial, but still basic query to see what Drizzle looks like in practice. Let’s say we’re looking to find some nice beach reading for the summer. We want to find books that belong to you (userId == “123”), and is either less than 150 pages, or was written by Stephan Jay Gould. We want the first ten, and we want them sort from most recently added to least recently added (the id key is auto-numbered, so we can sort on that for the same effect)<\/p>\n\n\n\n
In SQL we’d do something like this:<\/p>\n\n\n
SELECT<\/span> *\nFROM<\/span> books\nWHERE<\/span> userId = '123'<\/span> AND<\/span> (pages < 150<\/span> OR<\/span> authors<\/span> LIKE<\/span> '%Stephen Jay Gould%'<\/span>)\nORDER<\/span> BY<\/span> id<\/span> desc<\/span>\nLIMIT<\/span> 10<\/span><\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
With Drizzle we’d write this:<\/p>\n\n\n
const<\/span> result = await<\/span> db\n  .select()\n  .from(books)\n  .where(\n    and(\n      eq(books.userId, userId),\n      or(lt(books.pages, 150<\/span>), like(books.authors, \"%Stephen Jay Gould%\"<\/span>))\n    )\n  )\n  .orderBy(desc(books.id))\n  .limit(10<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Which works!<\/p>\n\n\n
[\n  {\n    \"id\"<\/span>: 1088<\/span>,\n    \"userId\"<\/span>: \"123\"<\/span>,\n    \"authors\"<\/span>: [\"Siry, Steven E\"<\/span>],\n    \"title\"<\/span>: \"Greene: Revolutionary General (Military Profiles)\"<\/span>,\n    \"isbn\"<\/span>: \"9781574889130\"<\/span>,\n    \"pages\"<\/span>: 144<\/span>\n  },\n  {\n    \"id\"<\/span>: 828<\/span>,\n    \"userId\"<\/span>: \"123\"<\/span>,\n    \"authors\"<\/span>: [\"Morton J. Horwitz\"<\/span>],\n    \"title\"<\/span>: \"The Warren Court and the Pursuit of Justice\"<\/span>,\n    \"isbn\"<\/span>: \"0809016257\"<\/span>,\n    \"pages\"<\/span>: 144<\/span>\n  },\n  {\n    \"id\"<\/span>: 506<\/span>,\n    \"userId\"<\/span>: \"123\"<\/span>,\n    \"authors\"<\/span>: [\"Stephen Jay Gould\"<\/span>],\n    \"title\"<\/span>: \"Bully for Brontosaurus: Reflections in Natural History\"<\/span>,\n    \"isbn\"<\/span>: \"039330857X\"<\/span>,\n    \"pages\"<\/span>: 544<\/span>\n  },\n  {\n    \"id\"<\/span>: 412<\/span>,\n    \"userId\"<\/span>: \"123\"<\/span>,\n    \"authors\"<\/span>: [\"Stephen Jay Gould\"<\/span>],\n    \"title\"<\/span>: \"The Flamingo's Smile: Reflections in Natural History\"<\/span>,\n    \"isbn\"<\/span>: \"0393303756\"<\/span>,\n    \"pages\"<\/span>: 480<\/span>\n  },\n  {\n    \"id\"<\/span>: 356<\/span>,\n    \"userId\"<\/span>: \"123\"<\/span>,\n    \"authors\"<\/span>: [\"Stephen Jay Gould\"<\/span>],\n    \"title\"<\/span>: \"Hen's Teeth and Horse's Toes: Further Reflections in Natural History\"<\/span>,\n    \"isbn\"<\/span>: \"0393311031\"<\/span>,\n    \"pages\"<\/span>: 416<\/span>\n  },\n  {\n    \"id\"<\/span>: 319<\/span>,\n    \"userId\"<\/span>: \"123\"<\/span>,\n    \"authors\"<\/span>: [\"Robert J. Schneller\"<\/span>],\n    \"title\"<\/span>: \"Cushing: Civil War SEAL (Military Profiles)\"<\/span>,\n    \"isbn\"<\/span>: \"1574886967\"<\/span>,\n    \"pages\"<\/span>: 128<\/span>\n  }\n]<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
The Drizzle version was actually a little bit longer. But we’re not optimizing for fewest possible lines of code. The Drizzle version is typed, with autocomplete to guide you toward a valid query, and TypeScript to warn you when you miss. The query is also a lot more composable. What do I mean by that?<\/p>\n\n\n\n
Composability: Putting Queries Together<\/h2>\n\n\n\n
Let’s write something slightly<\/em> more advanced and slightly<\/em> more realistic. Let’s code up a function that takes any number of search filters, and puts together a query. Here’s what the filters look like<\/p>\n\n\n
type<\/span> SearchPacket = Partial<{\n  title: string<\/span>;\n  author: string<\/span>;\n  maxPages: number<\/span>;\n  subjects?: number<\/span>[];\n}>;<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Note the Partial<\/code><\/a> type. We’re taking in any number of these filters\u2014possibly none of them. Whichever filters are passed, we want them to be additive; we want them combined with and<\/code>. We’ve seen and<\/code> already, and it can take the result of calls to eq<\/code>, lt<\/code>, and lots of others<\/a>. We’ll need to create an array of all of these filters, and Drizzle gives us a parent type that can hold any of them: SQLWrapper<\/code>.<\/p>\n\n\n\n
Let’s get started.<\/p>\n\n\n
async<\/span> function<\/span> searchBooks<\/span>(args: SearchPacket<\/span>) <\/span>{\n  const<\/span> searchConditions: SQLWrapper[] = [];\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
We’ve got our array of filters. Now let’s start filling it up.<\/p>\n\n\n
async<\/span> function<\/span> searchBooks<\/span>(args: SearchPacket<\/span>) <\/span>{\n  const<\/span> searchConditions: SQLWrapper[] = [];\n  if<\/span> (args.title) {\n    searchConditions.push(like(books.title, `%${args.title}<\/span>%`<\/span>));\n  }\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Nothing new, yet. This is the same filter we saw before with authors.<\/p>\n\n\n\n
Typically, with traditional ORM’s you’d scramble to the docs to look for an equivalent to the ->><\/code> operator, as well as the LOWER function. Drizzle does something better, and gives us a nice escape hatch to just write SQL directly in situations like this. Let’s implement our authors filter.<\/p>\n\n\n
async<\/span> function<\/span> searchBooks<\/span>(args: SearchPacket<\/span>) <\/span>{\n  const<\/span> searchConditions: SQLWrapper[] = [];\n  if<\/span> (args.title) {\n    searchConditions.push(like(books.title, `%${args.title}<\/span>%`<\/span>));\n  }\n  if<\/span> (args.author) {\n    searchConditions.push(\n      sql`LOWER(${books.authors}<\/span>->>\"$\") LIKE ${`%${args.author.toLowerCase()}<\/span>%`<\/span>}<\/span>`<\/span>\n    );\n  }\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Note the sql<\/code> tagged template literal. It lets us put arbitrary SQL in for one-off operations that may not be implemented in the ORM. Before moving on, let’s take a quick peak at the SQL generated by this:<\/p>\n\n\n
{\n  \"sql\"<\/span>: \"select `id`, `userId`, `authors`, `title`, `isbn`, `pages` from `books` where (`books`.`userId` = ? and LOWER(`books`.`authors`->>\\\"$\\\") LIKE ?) order by `books`.`id` desc limit ?\"<\/span>,\n  \"params\"<\/span>: [\"123\"<\/span>, \"%gould%\"<\/span>, 10<\/span>]\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Let’s zoom in on the authors piece. What we entered as…<\/p>\n\n\n
sql`LOWER(${books.authors}<\/span>->>\"$\") LIKE ${`%${args.author.toLowerCase()}<\/span>%`<\/span>}<\/span>`<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
… gets transformed as:<\/p>\n\n\n
LOWER(`books`.`authors`->>\"$\") LIKE ?<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
Our search term was parameterized; however, Drizzle was smart enough to not<\/em> parameterize our column. I’m continuously impressed by small details like this. The maxPages<\/code> piece is the same as before<\/p>\n\n\n
if<\/span> (args.maxPages) {\n  searchConditions.push(lte(books.pages, args.maxPages));\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Nothing new or interesting. Now let’s look at the subjects<\/code> filter. We can pass in an array of subject ids, and we want to filter books that have that subject. The relationship between books and subjects is stored in a separate table, booksSubjects<\/code>. This table simply has rows with an id, a book id, and a subject id (and also the userId for that book, to make other queries easier).<\/p>\n\n\n\n
So if book 12 has subject 34, there’ll be a row with bookId of 12, and subjectId of 34.<\/p>\n\n\n\n
async<\/span> function<\/span> searchBooks<\/span>(args: SearchPacket<\/span>) <\/span>{\n  const<\/span> searchConditions: SQLWrapper[] = [];\n  if<\/span> (args.title) {\n    searchConditions.push(like(books.title, `%${args.title}<\/span>%`<\/span>));\n  }\n  if<\/span> (args.author) {\n    searchConditions.push(\n      sql`LOWER(${books.authors}<\/span>->>\"$\") LIKE ${`%${args.author.toLowerCase()}<\/span>%`<\/span>}<\/span>`<\/span>,\n    );\n  }\n  if<\/span> (args.maxPages) {\n    searchConditions.push(lte(books.pages, args.maxPages));\n  }\n  if<\/span> (args.subjects?.length) {\n    searchConditions.push(\n      exists(\n        db\n          .select({ _: sql`1`<\/span> })\n          .from(booksSubjects)\n          .where(\n            and(\n              eq(books.id, booksSubjects.book),\n              inArray(booksSubjects.subject, args.subjects),\n            ),\n          ),\n      ),\n    );\n  }<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
We can pass an exists()<\/code> call right into our list of filters, just like with real SQL. This bit:<\/p>\n\n\n
_: sql`1`<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
… is curious, but that’s just us saying\u00a0SELECT 1<\/code>\u00a0which is a common way of putting something into a SELECT list, even though we’re not pulling back any data; we’re just checking for existence. Lastly, the\u00a0inArray<\/code>\u00a0Drizzle helper is how we generate an IN query. Here’s what the generated SQL looks like for this subjects query:<\/p>\n\n\n
select<\/span> `id`<\/span>, `userId`<\/span>, `authors`<\/span>, `title`<\/span>, `isbn`<\/span>, `pages`<\/span>\nfrom<\/span> `books`<\/span>\nwhere<\/span> (`books`<\/span>.`userId`<\/span> = ? and<\/span> exists<\/span> (select<\/span> 1<\/span>\n                                        from<\/span> `books_subjects`<\/span>\n                                        where<\/span> (`books`<\/span>.`id`<\/span> = `books_subjects`<\/span>.`book`<\/span> and<\/span>\n                                               `books_subjects`<\/span>.`subject`<\/span> in<\/span> (?, ?))))\norder<\/span> by<\/span> `books`<\/span>.`id`<\/span> desc<\/span>\nlimit<\/span> ?<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
That was our last filter. Now we can pipe our filters in to execute the query we put together.<\/p>\n\n\n
async<\/span> function<\/span> searchBooks<\/span>(args: SearchPacket<\/span>) <\/span>{\n  const<\/span> searchConditions: SQLWrapper[] = [];\n  if<\/span> (args.title) {\n    searchConditions.push(like(books.title, `%${args.title}<\/span>%`<\/span>));\n  }\n  if<\/span> (args.author) {\n    searchConditions.push(\n      sql`LOWER(${books.authors}<\/span>->>\"$\") LIKE ${`%${args.author.toLowerCase()}<\/span>%`<\/span>}<\/span>`<\/span>\n    );\n  }\n  if<\/span> (args.maxPages) {\n    searchConditions.push(lte(books.pages, args.maxPages));\n  }\n  if<\/span> (args.subjects?.length) {\n    searchConditions.push(\n      exists(\n        db\n          .select({ _: sql`1`<\/span> })\n          .from(booksSubjects)\n          .where(\n            and(\n              eq(books.id, booksSubjects.book),\n              inArray(booksSubjects.subject, args.subjects)\n            )\n          )\n      )\n    );\n  }\n\n  const<\/span> result = await<\/span> db\n    .select()\n    .from(books)\n    .where(and(eq(books.userId, userId), ...searchConditions))\n    .orderBy(desc(books.id))\n    .limit(10<\/span>);\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
The ability to treat SQL queries as typed function calls that can be combined arbitratily is what makes Drizzle shine.<\/p>\n\n\n\n
Digging deeper<\/h2>\n\n\n\n
We could end the post here, but let’s go further and see how Drizzle handles something fairly complex. You might never need (or want to) write queries like this. My purpose in including this section is to show that you can<\/em>, if you ever need to.<\/p>\n\n\n\n
With that out of the way, let’s write a query to get aggregate info about our books. We want our most and least popular subject(s), and how many books we have with those subjects. We also want to know any unused subjects, as well as that same info about tags (which we haven’t talked about). And also the total number of books we have overall. This data might be displayed in a screen like this.<\/p>\n\n\n\n
\"aggregate
Screenshot<\/figcaption><\/figure>\n\n\n\n
To keep this section manageable we’ll just get the book counts and the most and least subjects. The other pieces are variations on that theme. You can see the finished product here<\/a>.<\/p>\n\n\n\n
Let’s look at some of the SQL for this and how to write it with Drizzle.<\/p>\n\n\n\n
Number of books per subject<\/h3>\n\n\n\n
In SQL we can group things together with GROUP BY.<\/p>\n\n\n
SELECT<\/span>\n    subject,\n    count<\/span>(*)\nFROM<\/span> books_subjects\nGROUP<\/span> BY<\/span> subject<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
Now our SELECT list, rather than pulling items from a table, is now pulling from a (conceptual) lookup table. We (conceptually) have a bunch of buckets stored by subject id. So we can select those subject id’s, as well as aggregate info from the buckets themselves, which we do with the count(*)<\/code>. This selects each subject, and the number of books under that subject.<\/p>\n\n\n\n
And it works:<\/p>\n\n\n\n
\"Group<\/figure>\n\n\n\n
But we want the most, and least popular subjects. SQL also has what are called window functions. We can, on the fly, sort these buckets in some order, and then ask questions about the data, sorted in that way. We basically want the subject(s) with the highest, or lowest number of books, including ties. It turns out RANK<\/a> is exactly what we want. Let’s see how this works<\/p>\n\n\n
SELECT<\/span>\n    subject,\n    count<\/span>(*) as<\/span> count<\/span>,\n    RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> count<\/span>(*) DESC<\/span>) MaxSubject,\n    RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> count<\/span>(*) ASC<\/span>) MinSubject\nFROM<\/span> books_subjects\nWHERE<\/span> userId = '123'<\/span>\nGROUP<\/span> BY<\/span> subject<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
We ask for the rank of each row, when the whole result set is sorted in whatever way we describe.<\/p>\n\n\n\n
\"rank\n\"<\/figure>\n\n\n\n
Subjects 79, 137 and 150 all have a minSubject<\/code> rank of 1, which means they are the least used subject, which makes sense since there’s only one book with that subject.<\/p>\n\n\n\n
It’s a little mind bendy at first, so don’t worry if this looks a little weird. The point is to show how well Drizzle can simplify SQL for us, not to be a deep dive into SQL, so let’s move on.<\/p>\n\n\n\n
We want the subjects with a MaxSubject<\/code> of 1, or a MinSubject<\/code> of 1. We can’t use WHERE<\/code> for this, at least not directly. The solution in SQL is to turn this query into a virtual table, and query that<\/em>. It looks like this:<\/p>\n\n\n
SELECT<\/span>\n    t.subject id<\/span>,\n    CASE<\/span> WHEN<\/span> t.MinSubject = 1<\/span> THEN<\/span> 'MinSubject'<\/span> ELSE<\/span> 'MaxSubject'<\/span> END<\/span> as<\/span> label,\n    t.count\nFROM<\/span> (\n    SELECT<\/span>\n        subject,\n        count<\/span>(*) as<\/span> count<\/span>,\n        RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> count<\/span>(*) DESC<\/span>) MaxSubject,\n        RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> count<\/span>(*) ASC<\/span>) MinSubject\n    FROM<\/span> books_subjects\n    WHERE<\/span> userId = '123'<\/span>\n    GROUP<\/span> BY<\/span> subject\n) t\nWHERE<\/span> t.MaxSubject = 1<\/span> OR<\/span> t.MinSubject = 1<\/span><\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
And it works.<\/p>\n\n\n\n
\"rank\"<\/figure>\n\n\n\n
Moving this along<\/h3>\n\n\n\n
We won’t show tags, since it’s basically identical except we hit a books_tags<\/code> table, instead of books_subjects<\/code>. We also won’t show unused subjects (or tags), which is also very similar, except we use a NOT EXISTS<\/code> query.<\/p>\n\n\n\n
The query to get the total number of books looks like this:<\/p>\n\n\n
SELECT<\/span> count<\/span>(*) as<\/span> count<\/span>\nFROM<\/span> books\nWHERE<\/span> userId = '123'<\/span><\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
Let’s add some columns to get it in the same structure as our subjects queries:<\/p>\n\n\n
SELECT<\/span>\n    0<\/span> id<\/span>,\n    'Books Count'<\/span> as<\/span> label,\n    count<\/span>(*) as<\/span> count<\/span>\nFROM<\/span> books\nWHERE<\/span> userId = '123'<\/span><\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, since these queries return the same structure, let’s combine them into one big query. We use UNION for this.<\/p>\n\n\n
SELECT<\/span> *\nFROM<\/span> (\n    SELECT<\/span>\n        t.subject id<\/span>,\n        CASE<\/span> WHEN<\/span> t.MinSubject = 1<\/span> THEN<\/span> 'MinSubject'<\/span> ELSE<\/span> 'MaxSubject'<\/span> END<\/span> as<\/span> label,\n        t.count\n    FROM<\/span> (\n        SELECT<\/span>\n            subject,\n            count<\/span>(*) as<\/span> count<\/span>,\n            RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> count<\/span>(*) DESC<\/span>) MaxSubject,\n            RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> count<\/span>(*) ASC<\/span>) MinSubject\n        FROM<\/span> books_subjects\n        GROUP<\/span> BY<\/span> subject\n    ) t\n    WHERE<\/span> t.MaxSubject = 1<\/span> OR<\/span> t.MinSubject = 1<\/span>\n) subjects\nUNION<\/span>\n    SELECT<\/span>\n        0<\/span> id<\/span>,\n        'Books Count'<\/span> as<\/span> label,\n        count<\/span>(*) as<\/span> count<\/span>\n    FROM<\/span> books\n    WHERE<\/span> userId = '123'<\/span>;<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
And it works! Phew! <\/p>\n\n\n\n
\"union<\/figure>\n\n\n\n
But this is gross to write manually, and even grosser to maintain. There’s a lot of pieces here and there’s no (good) way to break this apart and manage separately. SQL is ultimately text, and you can, of course, generate these various pieces of text with different functions in your code, and then concatenate them together.<\/p>\n\n\n\n
But that’s fraught with difficulty too. It’s easy to get small details wrong when you’re pasting strings of code together. And believe it or not, this query is much simpler than much of what I’ve seen.<\/p>\n\n\n\n
The Drizzle Way<\/h2>\n\n\n\n
Let’s see what this looks like in Drizzle. Remember that initial query to get each subject, with its count, and rank? Here it is in Drizzle<\/p>\n\n\n
const<\/span> subjectCountRank = ()<\/span> =><\/span>\n  db\n    .select({\n      subject<\/span>: booksSubjects.subject,\n      count<\/span>: sql<number>`COUNT(*)`<\/span>.as(\"count\"<\/span>),\n      rankMin<\/span>: sql<number>`RANK() OVER (ORDER BY COUNT(*) ASC)`<\/span>.as(\"rankMin\"<\/span>),\n      rankMax<\/span>: sql<number>`RANK() OVER (ORDER BY COUNT(*) DESC)`<\/span>.as(\"rankMax\"<\/span>),\n    })\n    .from(booksSubjects)\n    .where(eq(booksSubjects.userId, userId))\n    .groupBy(booksSubjects.subject)\n    .as(\"t\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Drizzle supports grouping, and it even has an as<\/code> function to alias a query, and enable it to be queried from<\/em>. Let’s do that next.<\/p>\n\n\n
const<\/span> subjectsQuery = ()<\/span> =><\/span> {\n  const<\/span> subQuery = subjectCountRank();\n\n  return<\/span> db\n    .select({\n      label<\/span>:\n        sql<string>`CASE WHEN t.rankMin = 1 THEN 'MIN Subjects' ELSE 'MAX Subjects' END`<\/span>.as(\n          \"label\"<\/span>\n        ),\n      count<\/span>: subQuery.count,\n      id<\/span>: subQuery.subject,\n    })\n    .from(subQuery)\n    .where(or(eq(subQuery.rankMin, 1<\/span>), eq(subQuery.rankMax, 1<\/span>)));\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
We stuck our query to get the ranks in a function, and then we just called that function, and queried from its result. SQL is feeling a lot more like normal coding!<\/p>\n\n\n\n
The query for the total book count is simple enough.<\/p>\n\n\n
db\n  .select({ label<\/span>: sql<string>`'All books'`<\/span>, count<\/span>: sql<number>`COUNT(*)`<\/span>, id<\/span>: sql<number>`0`<\/span> })\n  .from(books)\n  .where(eq(books.userId, userId)),<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Hopefully we won’t be too surprised to learn that Drizzle has a\u00a0union<\/code>\u00a0function, to union queries together. Let’s see it all together:<\/p>\n\n\n
const<\/span> dataQuery = union(\n  db\n    .select({\n      label<\/span>: sql<string>`'All books'`<\/span>,\n      count<\/span>: sql<number>`COUNT(*)`<\/span>,\n      id<\/span>: sql<number>`0`<\/span>,\n    })\n    .from(books)\n    .where(eq(books.userId, userId)),\n  subjectsQuery()\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Which generates this SQL for us:<\/p>\n\n\n
(select<\/span> 'All books'<\/span>, COUNT<\/span>(*), 0<\/span> from<\/span> `books`<\/span> where<\/span> `books`<\/span>.`userId`<\/span> = ?)\nunion<\/span>\n(select<\/span> CASE<\/span> WHEN<\/span> t.rankMin = 1<\/span> THEN<\/span> 'MIN Subjects'<\/span> ELSE<\/span> 'MAX Subjects'<\/span> END<\/span> as<\/span> `label`<\/span>, `count`<\/span>, `subject`<\/span>\n from<\/span> (select<\/span> `subject`<\/span>,\n              COUNT<\/span>(*)                             as<\/span> `count`<\/span>,\n              RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> COUNT<\/span>(*) ASC<\/span>)  as<\/span> `rankMin`<\/span>,\n              RANK<\/span>() OVER<\/span> (ORDER<\/span> BY<\/span> COUNT<\/span>(*) DESC<\/span>) as<\/span> `rankMax`<\/span>\n       from<\/span> `books_subjects`<\/span>\n       where<\/span> `books_subjects`<\/span>.`userId`<\/span> = ?\n       group<\/span> by<\/span> `books_subjects`<\/span>.`subject`<\/span>) `t`<\/span>\n where<\/span> (`rankMin`<\/span> = ? or<\/span> `rankMax`<\/span> = ?))<\/code><\/span>Code language:<\/span> SQL (Structured Query Language)<\/span> (<\/span>sql<\/span>)<\/span><\/small><\/pre>\n\n\n
Basically the same thing we did before, but with a few more parens, plus some userId<\/code> filtering I left off for clarity.<\/p>\n\n\n\n
I left off the tags queries, and the unused subjects\/tags queries, but if you’re curious what they look like, the code is all here<\/a> and the final union looks like this:<\/p>\n\n\n
const<\/span> dataQuery = union(\n  db\n    .select({\n      label<\/span>: sql<string>`'All books'`<\/span>,\n      count<\/span>: sql<number>`COUNT(*)`<\/span>,\n      id<\/span>: sql<number>`0`<\/span>,\n    })\n    .from(books)\n    .where(eq(books.userId, userId)),\n  subjectsQuery(),\n  unusedSubjectsQuery(),\n  tagsQuery(),\n  unusedTagsQuery()\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Just more function calls thrown into the union.<\/p>\n\n\n\n
Flexibility<\/h3>\n\n\n\n
Some of you might wince seeing that many large queries all union<\/code>‘d together. Those queries are actually run one after the other on the MySQL box. But, for this project it’s a small amount of data and there’s not multiple round trips over the network to do it. Our MySQL engine executes those queries one after the other.<\/p>\n\n\n\n
But let’s say you decide you’re better off breaking that union apart, and sending N queries, with each piece, and putting it all together in application code. These queries are already<\/em> separate function calls. It would be fairly easy to remove those calls from the union, and instead invoke them in isolation (and then modify your application code).<\/p>\n\n\n\n
This kind of flexibility is what I love the most about Drizzle. Refactoring large, complex stored procedure has always been a pain with SQL. When you code it through Drizzle, it becomes much more like refactoring a typed programming language like TypeScript or C#.<\/p>\n\n\n\n
Debugging Queries<\/h2>\n\n\n\n
Before we wrap up, let’s take a look at how easily Drizzle let’s you debug your queries. Let’s say the query from earlier didn’t return what we expected, and we want to see the actual SQL being run. We can do that by\u00a0removing<\/strong>\u00a0the\u00a0await<\/code>\u00a0from the query, and then calling\u00a0toSQL<\/code>\u00a0on the result.<\/p>\n\n\n
import<\/span> { and, desc, eq, like, lt, or } from<\/span> \"drizzle-orm\"<\/span>;\n\nconst<\/span> result = db\n  .select()\n  .from(books)\n  .where(\n    and(\n      eq(books.userId, userId),\n      or(lt(books.pages, 150<\/span>), like(books.authors, \"%Stephen Jay Gould%\"<\/span>))\n    )\n  )\n  .orderBy(desc(books.id))\n  .limit(10<\/span>);\n\nconsole<\/span>.log(result.toSQL());<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This displays the following:<\/p>\n\n\n
{\n  \"sql\"<\/span>: \"select `id`, `userId`, `authors`, `title`, `isbn`, `pages` from `books` where (`books`.`userId` = ? and (`books`.`pages` < ? or `books`.`authors` like ?)) order by `books`.`id` desc limit ?\"<\/span>,\n  \"params\"<\/span>: [\"123\"<\/span>, 150<\/span>, \"%Stephen Jay Gould%\"<\/span>, 10<\/span>]\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
result.toSQL()<\/code> returned an object, with a sql<\/code> field with our query, and a params<\/code> field with the parameters. As any ORM would, Drizzle parameterized our query, so fields with invalid characters wouldn’t break anything. You can now run this query directly against your database to see what went wrong.<\/p>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
I hope you’ve enjoyed this introduction to Drizzle. If you’re not afraid of a little SQL, it can make your life a lot easier.<\/p>\n","protected":false},"excerpt":{"rendered":"
Drizzle is a new ORM tool that blends traditional ORM querying with a typed SQL API. Drizzle supports various databases (Postgres, MySQL, SQLite) and aims to simplify SQL crafting while avoiding common ORM pitfalls.<\/p>\n","protected":false},"author":21,"featured_media":2725,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[174,188],"class_list":["post-2708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-data","tag-drizzle"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/06\/drizzle-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2708"}],"version-history":[{"count":21,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2708\/revisions"}],"predecessor-version":[{"id":2756,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2708\/revisions\/2756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2725"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In SQL when we want to see if a given row exists<\/em> in some table, we use the exists<\/a> keyword, and Drizzle has an exists<\/code> function for this very purpose. Let’s move on with our function<\/p>\n\n\n
Speaking of authors, let’s add that query next. But let’s make the author check a little more realistic. It’s not a varchar<\/code> column, it holds JSON values, which themselves are strings of arrays. MySQL gives us a way to search JSON: the ->><\/code> operator<\/a>. This takes a JSON column, and evaluates a path<\/em> on it. So if you had objects in there, you’d pass string paths to get properties out. We just have an array of strings, so our path is $<\/code>, which is the actual values in the array. And the string comparrisons when we’re filtering on JSON columns like this is no longer case insensitive, so we’ll want to use the LOWER function in MySQL.<\/p>\n\n\n\n
Let’s dive in and look closer. This post will take a brief overview of setting up Drizzle, and querying, and then do a deeper dive showing off some of its powerful abilities with this typed SQL querying API. The docs are here<\/a> if you’d like to look closer at anything.<\/p>\n\n\n\n
This ease of use may seem nice, but it can cause other problems. For example, you might struggle figuring out how to do non-trivial queries. And there are performance foot-guns, such as the infamous\u00a0Select N + 1 problem<\/a>, which you might cause without realizing it due to the abstracted away syntax.<\/p>\n\n\n\n