見出し画像

[ShopifyApp]ブログ記事にいいねボタンを設置Part3「いいねを取り消す」 Remixでアプリ作成 #003

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

ブログの各記事にいいねボタンを設置できるアプリを作っています。
前回はボタンをクリックしたらボタンを黒く塗りつぶして、ボタンの横にいいね数が表示されるようにしました。ひたすらいいね数が増加していくというところまでやったので、今日は一度いいねが押されていたら2回目クリックした時にはいいねを取り消すようにしてみます!

✔️今日のゴール

(今日の時点ではログイン中のみのユーザーしかいいね数が反映されてない)

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

✔️作成手順

📌Step1  バックエンド:アクション内にDeleteを追加

api.likecount.jsxのSwitch内を書き換え。

Prismaのドキュメント見るとdelete()で削除だったので、下記を追記。

await db.like.delete({
     where: {
           id: existingLike.id
     }
 });

そして、response内に

liked: !existingLike

を追記。

ここから先は

7,427字
この記事のみ ¥ 1,500
期間限定 PayPay支払いすると抽選でお得に!

この記事が気に入ったらサポートをしてみませんか?