FROM CACHE - jp_header
解決済

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

sen25
Shopify Partner
15 2 0

お世話になります。

 

現在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に関しての知識が乏しく、アプリ開発に関しての記事や事例が少ないのでご教授いただければ幸いです。

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

 

 

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1504 539 671

成功

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ボタンを押して頂ければ嬉しいです。

 

フルバランス 道家

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

3件の返信3

株式会社フルバランス
Shopify Partner
1504 539 671

成功

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ボタンを押して頂ければ嬉しいです。

 

フルバランス 道家

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
sen25
Shopify Partner
15 2 0

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

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

 

VXUT-shop
Shopify Partner
10 1 1

他の方法があります。

Firebase realtime databaseで対応する。

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

全くJsで書くです。