Model Data in the Prisma Schema for a Remix App
Let’s move away from hardcoded JSON and use our own database. In this course, we’ll be using Prisma as our database but Remix doesn’t actually care about what database you’re using!
To model Posts in our Prisma database we can edit the schema.prisma file under the prisma directory. Changes can be pushed to the db by running npx prism db push in your terminal.
We’ll also be seeding the database with data using a seed file in this lesson. Data in your seed file can be pushed running npx prisma db seed. Once you have data it can be accessed directly in your components!
I don't see where "model Post" from schema.prisma is used. I would have thought in the seed.ts file it would specify each post in the posts array is of the model "Post" in the schema file.
Hi, thank you very much for the material that is awsome as always.
I had a question because my IDE were displaying a type error for 'prisma.post', but I found the solution. It seems that my IDE failed to reload prisma compiled files, I restarted it and it solved the problem.
Chrome Canary will just render the page when reviewing the posts on Network tab. Even Name is different. On Chrome the name of the page is 'posts?_data=routes%2Fposts%2Findex' and on Chrome Canary it just posts and it preview renders the whole page.
My bad. :) Of course I have to refresh on root route (homepage) and navigate to posts to see what we are fetching. Just refreshing the current page (posts) we will see the serverside rendered page. :D
I was running into a typescript error in /posts/index.tsx once I switched posts mock data over to fetch via prisma. Fixed after digging through https://github.com/remix-run/remix/pull/4165
Fix was change component useLoaderData casting to:
const { posts } = useLoaderData<LoaderData>();
thanks noname