prisma

hooks-prisma-starter

This example shows how to implement a **fullstack app in TypeScript with React (frontend), Midway Hooks and Prisma Client (backend). It uses a SQLite database file with some initial dummy data which you can find at ./prisma/dev.db.

Getting started

Use this template:

npx degit https://github.com/midwayjs/hooks/examples/prisma ./hooks-app

1. Install dependencies

npm install

or

yarn

2. Create and seed the database

Run the following command to create your SQLite database file. This also creates the User and Post tables that are defined in prisma/schema.prisma:

npx prisma migrate dev --name init

Now, seed the database with the sample data in prisma/seed.ts by running the following command:

npx prisma db seed

3. Start the app

npm run dev

The app is now running, navigate to http://localhost:3000/ in your browser to explore its UI.

Expand for a tour through the UI of the app

Blog (located in ./pages/index.tsx

Signup (located in ./pages/signup.tsx)

Create post (draft) (located in ./pages/create.tsx)

Drafts (located in ./pages/drafts.tsx)

View post (located in ./pages/p/[id].tsx) (delete or publish here)

Using the REST API

You can also access the REST API of the API server directly. It is running on the same host machine and port and can be accessed via the /api route (in this case that is localhost:3000/api/, so you can e.g. reach the API with localhost:3000/api/feed).

GET

• /api/post/:id: Fetch a single post by its id
• /api/feed: Fetch all published posts
• /api/filterPosts?searchString={searchString}: Filter posts by title or content

POST

• /api/post: Create a new post
  • Body:
    • args: Array[{title: String, content: String, authorEmail: String}]
      • title: String (required): The title of the post
      • content: String (optional): The content of the post
      • authorEmail: String (required): The email of the user that creates the post
• /api/user: Create a new user
  • Body:
    • args: Array[{email: String, name: string}]
      • email: String (required): The email address of the user
      • name: String (optional): The name of the user

PUT

• /api/publish/:id: Publish a post by its id

DELETE

• /api/post/:id: Delete a post by its id