温泉一覧画面：温泉写真とスター数の平均とレビュー数を表示する

[otaki0413]

完了の定義

一覧画面(/hotsprings)の各カードに下記温泉情報を表示させる

• [x] 温泉名
• [x] 場所
• [x] スター数の平均
• [x] レビュー数
• [x] 温泉の画像（複数ある場合は1枚目を表示させる）

補足情報

現状のイメージ

[otaki0413]

現状、こんな感じ

[otaki0413]

分からない点

• 各温泉情報のもつ、レビューのレーティング平均値を求めるとき、getHotSpringsで取得したいがリレーション先の集計値のためできないのではないか？？
• 下記のようにgetRatingAvgを作って、平均値取得のみを行っている

export async function getHotSprings() {
  return await prisma.hotSpring.findMany({
    select: {
      id: true,
      title: true,
      location: true,
      images: true,
      _count: {
        select: { reviews: true },
      },
    },
    orderBy: { updatedAt: "desc" },
  });
}

export async function getRatingAvg(id: HotSpring["id"]) {
  try {
    const result = await prisma.review.aggregate({
      _avg: {
        rating: true,
      },
      where: {
        hotSpringId: id,
      },
    });

    return result._avg.rating ? parseFloat(result._avg.rating.toFixed(2)) : 0; // 小数点第2位まで出す
  } catch (error) {
    console.log(error);
    throw new Error("Unexpected error");
  }
}

解決につながりそうな案

• Prismaの$extendsメソッドを使用する
• https://www.prisma.io/docs/orm/prisma-client/client-extensions/result あたりが参考になるかも？

参考サイト

• https://www.prisma.io/blog/client-extensions-preview-8t3w27xkrxxn
• https://www.prisma.io/docs/orm/prisma-client/client-extensions/result

[otaki0413]

下記については、現状対応が難しそうなため、#32 でコード上にコメント残した。 https://github.com/otaki0413/YelpCamp-with-Remix/issues/32#issuecomment-1962826634