[ShopifyApp]ブログ記事にいいねボタンを設置Part2「クリックしたらボタンカラー変更といいね数を表示させる」・Remixでアプリ作成 #002

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

ブログの各記事にいいねボタンを設置できるアプリを作っています。
今日は前回の続き。

その記事のいいね数をいいねボタンの横に表示されるようにして、そのユーザーがすでにいいね押していた場合はいいねボタンを黒にするというところまでを作成してみます！

✔️今日のゴール

【ご購入前のご注意】
※返金&サポート&コメント返信はしておりません。メンバーシップのスタンダードプランで対応しています
※コードのみのご紹介で解説などはしておりません。
※2024.5時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりうまく動作しない可能性はあるかもしれません。

✔️作成手順

📌Step1　バックエンド：Loaderを更新

今回はLoaderを更新します。
下記の公式ドキュメント内にある、

Data Loading | Remix

const url = new URL(request.url);
const xxxx = url.searchParams.get("xxxx");

これを使ってデータベースからデータを取得します。

そして、Prismaの、

count()

findFirst()

Aggregation, grouping, and summarizing (Concepts) | Prisma Documentation

で、

// 記事のいいねの総数を取得
    const totalLikes = await db.like.count({
        where: {
            articleID
        }
    });

    // ユーザーがすでにいいねをしているか確認
    const userLike = await db.like.findFirst({
        where: {
            articleID,
            userID
        }
    });

を追記。

最後にJSONで返す。

return json({
        totalLikes,
        userLike: !!userLike
    });