FROM CACHE - jp_header

thema(liquid)からのGraphQLリクエスト

解決済
RikutoNakamura
遊覧客
40 1 5

Shopifyのテーマ(liquid)からGraphQLを使ってShopifyAPIにリクエストを送ることは可能でしょうか?
それともnodeサーバーなどの設定が必要になりますか?
どなたかわかる方いましたらよろしくお願いします。

1 件の受理された解決策

ベストソリューション
abekeishi
遊覧客
22 11 27

成功

可能かと思います。ApolloなどのGraphQLのクライアントを用いる方法と、いわゆるAjax(axios, fetch API, jQuery)でREST APIとしてリクエストを送る方法があると思います。

以下に詳細が書かれているドキュメントを示しますが、特にnodeサーバーなどは立てる必要はないと思います。

=> https://shopify.dev/docs/admin-api/getting-started

特殊な処理を中間で噛ませる場合は必要になるかもしれません。例えばGraphQLで取得したデータを整形してフロントに返却するとか。

 

ここで注意したいのが、ページを読み込む際に利用するデータをGraphQLから取得するのは避けた方がいいのではないかと思います(ページのレンダリングが遅くなるため)。

Liquidからデータが取得できるものはできるだけLiquidから取得した方がいいという事です。

スクリプトを介してGraphQLへリクエストを送るのは更新処理やユーザーのアクションで表示を変えたいときなどに有効かと思われます。

元の投稿で解決策を見る

2件の返信2
abekeishi
遊覧客
22 11 27

成功

可能かと思います。ApolloなどのGraphQLのクライアントを用いる方法と、いわゆるAjax(axios, fetch API, jQuery)でREST APIとしてリクエストを送る方法があると思います。

以下に詳細が書かれているドキュメントを示しますが、特にnodeサーバーなどは立てる必要はないと思います。

=> https://shopify.dev/docs/admin-api/getting-started

特殊な処理を中間で噛ませる場合は必要になるかもしれません。例えばGraphQLで取得したデータを整形してフロントに返却するとか。

 

ここで注意したいのが、ページを読み込む際に利用するデータをGraphQLから取得するのは避けた方がいいのではないかと思います(ページのレンダリングが遅くなるため)。

Liquidからデータが取得できるものはできるだけLiquidから取得した方がいいという事です。

スクリプトを介してGraphQLへリクエストを送るのは更新処理やユーザーのアクションで表示を変えたいときなどに有効かと思われます。

RikutoNakamura
遊覧客
40 1 5

ありがとうございます!