この記事でやらないこと

Remixの環境構築の解説
RemixへのMySQL導入方法の解説

この記事でやること

DBへの接続処理を作る
URLパス /posts 関連のファイルを作成する
ブラウザでデータを閲覧してみる

1. DBへの接続処理を作る

DBへの接続処理を作っていきます。ここで作成するprismaを介してデータを取得します。ファイルの場所は任意ですが、私はprismaディレクトリ配下に作成しました。

prisma/db.server.tsの中身はこちらです。

import { PrismaClient } from "@prisma/client";

let prisma: PrismaClient;

declare global {
  var __prisma: PrismaClient | undefined;
}

if (process.env.NODE_ENV === "production") {
    prisma = new PrismaClient();
} else {
  if (!global.__prisma) {
    global.__prisma = new PrismaClient();
  }
  prisma = global.__prisma;
}

export { prisma };

2. URLパス /posts 関連のファイルを作成する

画像のようにディレクトリとファイルを作成します。ここでは、バックエンドの処理とフロントエンドの処理を作っています。index.server.tsがバックエンドで、route.tsxがフロントエンドです。

バックエンド

ではまずはバックエンドのindex.server.tsを見ていきましょう。

import { prisma } from "../../../prisma/db.server";

export async function call() {
  return await prisma.post.findMany()
}

先ほど作成したprisma/db.serverからprismaを取得します。そのprismaを使って、テーブルからデータを取得する処理を行っています。

フロントエンド

次にフロントエンドのroute.tsxを作ります。

import { json } from "@remix-run/node"
import { useLoaderData } from "@remix-run/react"
import { call } from "./index.server"
import { Post } from "@prisma/client"

export const loader = async () => {
  const posts = await call()
  return json(posts)
}

export default function PostIndex() {
  const posts: Post[] = useLoaderData()
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post: Post) => (
          <li key={post.id}>
            <p>{post.title}: {post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

これでバックエンドとフロントエンドの処理は準備OKです。

3. ブラウザでデータを閲覧してみる

さて、この時点でMySQL内のPostテーブルにデータがない方は以下のクエリでデータを挿入してください。

mysql> INSERT INTO Post VALUES('abcde', 'This is my new book 1', 'A is the letter before B');
Query OK, 1 row affected (0.06 sec)

mysql> INSERT INTO Post VALUES('xyz', 'This is my new book 2', 'Z is the last letter');
Query OK, 1 row affected (0.02 sec)

これでデータの準備もOKです。

http://localhost:5173/posts/ にアクセスしてみてください。次のようになったら成功です。