lifetracker/apps/docs/docs/how-i-built-this/04-babys-first-schema.md

109 lines
4.0 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
description: Time for some actual functionality, believe it or not.
---
# Baby's First Schema
Unsurprisingly, this takes place in the database part of the project, which is `packages/db`.
The idea will be to define a new file, `day.ts`, in `packages/db/schema/`, and put the columns and constraints in there.
If I'm understanding correctly, a difference vs. Phoenix or Rails is that you don't have to write the migrations yourself: just edit the schema file and you can `drizzle-kit generate` the migrations straight out of the single file. Plus, it'll walk you through which columns you want to rename, which you want to make new, etc. Slick.
## But first, a detour...
I guess last time I had set up a schema in `packages/db/schema.ts`, and the migrations were in `packages/db/drizzle` -- I felt it was better to rename these:
- Schemas in their own directory (`schema`)
- Migrations called `migrations`, not `drizzle`
These changes required editing the front matter of a few Drizzle ts files, which I'm sure you can figure out for yourself.
Then I edited `day.ts` and prepared to generate and run the migrations.
This was the harder part that I do want to document:
### 1. Why won't the db generate command work
After changing the "events" schema I had started with last time to a "days" schema -- mainly to see if the db could migrate from one schema to another conflicting one -- I wasn't able to run the generate command:
```
pnpm drizzle-kit generate
```
`drizzle-kit` wasn't in the PATH, which was actually irrelevant, because I wanted to invoke this using `pnpm db:generate` the way I was able to run `pnpm db:migrate` and `pnpm db:studio`. Why wasn't it working?
The answer involved two steps. First, I had to add in `packages/db/package.json` a script:
```js
"scripts": {
"generate": "drizzle-kit generate"
}
```
which was obvious. What was NOT obvious was that the `db:___` syntax wasn't filtering into the db package for me, it was just already defined for `migrate` and `studio` in the root level package.json. Added `db:generate` in there and everything worked great.
```js
"scripts": {
"build": "turbo build",
"dev": "turbo dev",
...
"db:generate": "pnpm --filter @lifetracker/db generate",
```
Now, why not have this somehow alias to the one in the `packages/db/package.json` file? IDK, but the migrate and studio ones were written this way, so fuck it.
### 2. Adding "db:studio" to the dev pipeline in Turbo
With the migration ostensibly done, I wanted to see the glorious new table definition in the Drizzle Studio, but despite having run `pnpm run dev`, it wasn't running. How could I get it to run alongside?
This was pretty cool. I changed this in `turbo.json` at the project root:
```js
"dev": {
"dependsOn": ["^dev"], # This is the key
"cache": false,
"persistent": true
}
```
... and in the db package's `package.json`, I added:
```js
"scripts": {
...
"dev": "drizzle-kit studio",
...
}
```
This means that now when I run "pnpm dev" from the project root, along with Docusaurus (this shit) and the actual web app, I get the Drizzle Studio page simultaneously. So cool!
## Can we actually do something now?
Almost! Next snag: Trying to add `@lifetracker/db` as a dependency in the `@lifetracker/web` app, I realize I could just manually add it in the package.json, but ChatGPT suggested I run this command:
```bash
$ pnpm --filter=@lifetracker/web add @lifetracker/db
ERR_PNPM_FETCH_404 GET https://registry.npmjs.org/@lifetracker%2Fdb: Not Found - 404
This error happened while installing a direct dependency of /home/ryan/Documents/Code/lifetracker/apps/web
@lifetracker/db is not in the npm registry, or you have no permission to fetch it.
```
So, to fix this... you actually have to run
```
pnpm --filter=@lifetracker/web add @lifetracker/db@workspace:*
```
which is also why in the manually defined lines I had copied over into the package.json, it was written as:
```js
"@lifetracker/db": "workspace:*^*",
```
This made it work fine.