End to End React with Prisma 2

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.

2. Configure Auth0

Objective: We want to set up all of our data models using Prisma 2 up front so we can use them across all our videos more easily.

First we need to configure our postgres database. We will be doing this with AWS, but there are many other ways you can set this up including Heroku, Google Cloud, Azure and even self hosted. If you chose to set it up a different way, just pick up after the database creation and you should be all set.

Create a .env file:

.env

DATABASE_URL=postgresql://user:password@endpoint:5432/database_name

Add it to the .gitignore file:

.gitignore

node_modules
.next
.env

Now let's add the prisma client and cli.

npm install --save-dev @prisma/cli
npm install --save @prisma/client

In order to more easily use prisma, let's create several npm scripts. We will use generate to update the local javascript library to reflect the models and types we define in our schema.prisma file. We can prepare our database by first generating a migration with migrate:save and then pushing it up to the database with migrate:up.

package.json

json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start",
  "generate": "prisma generate",
  "migrate:save": "prisma migrate save --experimental",
  "migrate:up": "prisma migrate up --experimental"
},

Now let's create our schema. We have 6 tables: Feed, Bundle, User, SavedArticle, BundleTag, FeedTag. We define the relations between them as either one-to-many or many-to-many (we don't have any one-to-one relations in our schema). For many-to-many relations, such as the Feed-Bundle relation we can just specify that by having Bundle[] or Feed[] as the type. For one-to-many relations, we have to give the schema a little more help. We can see in the case for Author-Feed relation that on the Feed model we add the @relation(name: "FeedAuthor", fields: [authorId], references: [id]) and a field called authorId while on the User model we add @relation("FeedAuthor") to help clarify the relation.

Note that these relations are a little tricky- I'd highly recommend installing the Prisma extension in VS Code because it will automatically set up these relations for us!

prisma/schema.prisma

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")
}
generator client {
  provider = "prisma-client-js"
}
model Feed {
  id            String         @id
  name          String
  url           String         @unique
  bundles       Bundle[]
  author        User?          @relation(name: "FeedAuthor", fields: [authorId], references: [id])
  authorId      String?
  tags          FeedTag[]
  likes         User[]         @relation(name: "FeedUserLikes")
  savedArticles SavedArticle[]
}
model Bundle {
  id          String      @id
  feeds       Feed[]
  name        String
  description String      @default("")
  author      User?       @relation(name: "BundleAuthor", fields: [authorId], references: [id])
  authorId    String?
  tags        BundleTag[]
  likes       User[]      @relation(name: "BundleUserLikes")
}
model User {
  id            String         @id
  auth0         String         @unique
  nickname      String?
  picture       String?
  bundles       Bundle[]       @relation("BundleAuthor")
  feeds         Feed[]         @relation("FeedAuthor")
  savedArticles SavedArticle[]
  feedLikes     Feed[]         @relation(name: "FeedUserLikes")
  bundleLikes   Bundle[]       @relation(name: "BundleUserLikes")
}
model SavedArticle {
  id       String @id
  author   User?  @relation(fields: [authorId], references: [id])
  contents Json
  url      String
  feed     Feed   @relation(fields: [feedId], references: [id])
  authorId String?
  feedId   String
}
model BundleTag {
  id      String   @id
  name    String   @unique
  bundles Bundle[]
}
model FeedTag {
  id    String @id
  name  String @unique
  feeds Feed[]
}

Now we need to prepare our local prisma library based on our schema so we can have strong typesetting when we use our prisma object. Run the following npm command:

npm run generate

Now let's create a migration plan for upgrading our database to have this same schema. Run:

npm run migrate:save

Confirm yes you want to create the database name. Call the migration whatever you'd like. Finally, let's apply the migration:

npm run migrate:up