formからDBへのデータの登録のしかた

[sen25]

お世話になります。

現在shopifyのアプリ開発を行っています。nodeのテンプレートを使用してアプリを作成しました。

ストアの管理画面ではDBからデータの取得は完了しているのですがストア上に作成したformからDBへのデータの登録で詰まっています。

管理画面ではページが読み込まれた際にaxios.get(api/hoge)を実行してweb/index.jsではexpressとprismaを使用して取得してデータを返しております。

web/frontend/index.jsx

  const getData = () => {
    axios.get("api/hoge").then((res) => setdata(res.data));
  };
  
  use effect(() => getData(), [])

web/index.js

export async function createServer(
  root = process.cwd(),
  isProd = process.env.NODE_ENV === "production",
  billingSettings = BILLING_SETTINGS
) {
app = express();  
app.get("/api/hoge", async (req, res) => {
    const reviews = await prisma.reviews.findMany();
    return res.json(reviews);
  });

Theme app extensions を使用してテーマ上にformを作成しました。formからデータをpostしてデータを登録する際もweb/index.jsにapp.postを作成する認識であってますでしょうか？

またpostする際の宛先のurlですが管理画面同様に"api/postdata"のような形になるのでしょうか？

api/postdataのように設定したときにページが見つからないとconsoleに表示されているので記述方法が違うのでしょうか？

現在のjsファイルは以下の通りになっております。liquidのformにはid="form" action="#"を設定しております。

extensions/assets/page.js

document.getElementById("form").onsubmit = function () {
  fetch("api/datapost", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name: "Hubot",
      login: "hubot",
    }),
  }).then(
    function (response) {
      console.log("success");
    },
    function (error) {
      console.log(error);
      console.log("error");
    }
  );
};

jsに関しての知識が乏しく、アプリ開発に関しての記事や事例が少ないのでご教授いただければ幸いです。

また管理側の処理についてももっと良い記述方法がありましたらご教授いただければ幸いです。

[株式会社フルバランス · Accepted solution]

Sen25　様

お世話になっております。

フルバランスの道家と申します。

ご質問確認いたしました。

管理画面上で"api/hoge"にリクエストを送るとデータ取得ができ、

theme app extension上で"api/datapost"にリクエストを送ると「ページが見つからない」という点は、BASE_URLが異なるからかと推測します。

管理画面上ですとBASE_URLはアプリのURLとなり、{アプリのURL}/api/hogeにリクエストを送っています。

theme app extension上ですと、テーマに埋め込まれているためBASE_URLはストアのURLになりますので、{ストアのURL}/api/hogeとなるため、「ページが見つからない」エラーが発生しているのかと思います。

そのため、POSTリクエスト先を{アプリURL}/api/datapostにして試していただけますと幸いです。

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

フルバランス　道家

[sen25]

ご回答いただきありがとうございます。

ご回答いただいた内容の通りストア上からのリクエスト先をアプリのurl/api/hogeのような形で実行したらうまくいきました。

[VXUT-shop]

他の方法があります。

Firebase realtime databaseで対応する。

とても簡単だと思います。

全くJsで書くです。