Remix + Prisma + vercel, CRUD作成

概要:

Remix + Prisma + vercelで、CRUD作成となります。

• mysqlに接続する構成になります。

• vercelは、無料版

• Remix追加時に、 vercelを選択

• vercelデプロイは、githubからインポート

---

構成

• remix: 1.0.6
• Prisma ORM
• mysql 5.7 : AWS
• vercel hobby

---

参考のコード

https://github.com/kuc-arc-f/remix11

• yarn devで、起動できました。

---

CRUD

• index

index.tsx

import { useEffect, useRef } from "react";
import type { MetaFunction, LoaderFunction } from "remix";
import { useLoaderData, Link } from "remix";
import { Form, json, useActionData, redirect } from "remix";
const { PrismaClient } = require('@prisma/client')
import Config from '../../../config'
//import LibCookie from '../../lib/LibCookie'

export let meta: MetaFunction = () => {
  return {
    title: "Remix Starter",
    description: "Welcome to remix!"
  };
};

export let loader: LoaderFunction = async () => {
//console.log(data.data.tasks);
  const prisma = new PrismaClient()
  let items = await prisma.task.findMany({
    orderBy: [
      { id: 'desc', },
    ],
  });
  await prisma.$disconnect();
//  console.log(items); 
  return json(items);
}

export default function Page() {
  let data: any[] = useLoaderData<any>();
//console.log(data);
  return (
    <div className="remix__page">
      <main>
        <h3>Tasks - Index</h3>
        <hr />
        <Link to="/tasks/create">[Create]</Link>
        <hr />
        <ul>
        {data.map(item => (
          <li key={item.id} className="remix__page__resource">
            {item.title}
            <Link to={`./${item.id}`}>[ Show ]</Link>
            <Link to={`edit/${item.id}`}>[ edit ]</Link>
          </li>
        ))}
        </ul>
      </main>
    </div>
  );
}

• create

create.tsx

import { useEffect, useRef } from "react";
import type { MetaFunction, LoaderFunction } from "remix";
import { Form, json, useActionData, redirect } from "remix";
import Config from '../../../config'
const { PrismaClient } = require('@prisma/client')

export let meta: MetaFunction = () => {
  return {
    title: "Remix Starter",
    description: "Welcome to remix!"
  };
};
export async function action({ request }) {
  let formData = await request.formData();
  let title = formData.get("title");
console.log(title);
  //db
  const prisma = new PrismaClient()
  const result = await prisma.task.create({
    data: {
      title: title,
      content: "",
      userId: 0
    }
  }) 
  await prisma.$disconnect()  
  return json({ result: 'OK' })
}
export default function Page() {
  let data = useActionData();
console.log(data);
//console.log(cfg.OK_CODE);
  
  return (
    <div className="remix__page">
      <main>
        <h2>Task - Create</h2>
        <hr />
        <Form method="post" name="form3" id="form3" className="remix__form">
        <label>
          <div>title:</div>
          <input  name="title" id="title" type="text" />
          </label>
          <div>
            <button type="submit">Submit</button>
          </div>
        </Form>
      </main>
    </div>
  );
}

• show: app/routes/tasks/$id.tsx

• edit: app/routes/tasks/edit/$id.tsx

---

• package.json

{
  "private": true,
  "name": "remix-app-template",
  "description": "",
  "license": "",
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "postinstall": "remix setup node"
  },
  "dependencies": {
    "@prisma/client": "^3.5.0",
    "@remix-run/react": "^1.0.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.0.6",
    "@remix-run/serve": "^1.0.6",
    "@remix-run/vercel": "^1.0.6"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.0.6",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "prisma": "^3.5.0",
    "typescript": "^4.1.2"
  },
  "engines": {
    "node": ">=14"
  },
  "sideEffects": false
}

....