お世話になります。
現在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に関しての知識が乏しく、アプリ開発に関しての記事や事例が少ないのでご教授いただければ幸いです。
また管理側の処理についてももっと良い記述方法がありましたらご教授いただければ幸いです。