[ShopifyApp]POST、PATCHなどのメソッドをポストマンで確認（基本的な使い方確認）・Remixでアプリ作ってみる #day2

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

今日は基本的なRemixのレスポンスの処理の書き方の確認＾＾

✔️今日のゴール

✔️作成手順

Step1 まずはloaderでブラウザでJSON表示してみる

api.likecount.jsxファイルを作成。以下のコードを記載。

import { json } from "@remix-run/node";

export async function loader() {
    let data = {
        status: "OK",
        message: "成功しました！"
    }

    return json(data);
}

shopify.app.tomlファイル内のURLをコピーして、ブラウザで開く

ブラウザで開くとこんな画面になってる

まだ作成していない状態だと４０４の画面になる。

ファイル内何も書いてない時

上記で作成したファイル名を後ろにつけてEnterを押すと、、、

コピーしたURL/api/likecount (上記で作成したファイル名)

問題なくJSONが表示されました！！

ポストマンで確認してみると、Getメソッドでデータを取得できてます。

Step2 次はPOSTとPATCHをアクションで書いていきます。

export async function action({request}){
    const method = request.method;

    switch(method){
        case "POST":
            return json({ message: "成功", method: "POST"});
        case "PATCH":
            return json({ message: "成功", method: "PATCH"});
        default:
            return new Response("メソッドを指定してください", { status: 405});
    }
}

実行すると、

うまくデータが表示されてますね！

今日はこれで完了🎶
ありがとうございました！