# 外部APIを実行し、結果をLiquid上に反映したい

**URL:** <https://community.shopify.com/t/api-liquid/43848>\
**Category:** 技術的なQ＆A\
**Created:** [April 20, 2021, 7:51am UTC](https://community.shopify.com/t/api-liquid/43848 "2021-04-20T07:51:32Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Liquidテンプレート上で、外部DBのREST API実行結果を表示したいという相談。要件としては、可能ならバックエンド側で実行し、URLのクエリもAPIへ渡したいが、Headless構成（Next.js/Nuxt.jsなどのSSR/SSG）は既存アプリの制約で避けたい状況だった。

回答では、Liquid単体では外部システムのデータ取得はできず、Shopify上で外部データを表示するならJavaScriptで取得してHTMLを書き換える方法しかないと説明された。逆に、外部システム側でShopifyのデータを使うならShopify APIの利用は可能と整理されている。

最終的に、質問者はLiquidでの直接取得は不可と理解し、カスタムアプリ案もURLの自由度の低さから見送り、JavaScriptで実装する方針に決定。議論は実質的に解決済みで、バックエンド実行の要望自体は未実現のまま。

<div class="post-metadata">

**Author:** ![heine](https://avatars.discourse-cdn.com/v4/letter/h/278dde/32.png) [@heine](https://community.shopify.com/u/heine)\
**Post date:** [April 20, 2021, 7:51am UTC](https://community.shopify.com/t/api-liquid/43848/1 "2021-04-20T07:51:32Z")

</div>

現在テーマファイル（Liquid）の開発を進めています。  
別途用意されたDBからデータを持ってくる必要がありREST APIが用意されているのですが、この実行結果をLiquid上で呼び出し、表示したいと考えています。  
Liquid上に直接記載できる必要はなく、何らかのアプリを経由しても構いません。開発が必要であっても、既存のものでも結構です。  
headlessのように、外部（自作）APIを実行することはできないでしょうか？

なお、その際URLに含まれるクエリなどをAPIに渡せると尚良いと考えています。

以下、特記事項です

1. JSで実行するとクライアント側でのレンダリングになりますので、できればバックエンドで実行したいと考えています
2. Headless（Next.js/Nuxt.jsなどでSSR・SSGする）も考えたのですが、他で使用するアプリがAPI対応しておらず不適と判断しました

恐れながら、Shopifyには精通しておりません。  
上記認識がそもそも間違っている場合は、遠慮なくご指摘ください。

ご回答よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [April 23, 2021, 5:32am UTC](https://community.shopify.com/t/api-liquid/43848/2 "2021-04-23T05:32:06Z")

</div>

Liquidでは、別のシステムにあるデータの読み込みは出来ません。  
JavaScriptであれば、別のシステムにあるデータを読み込んだ後にHTMLの書き換えが出来ます。

Shopify上で別のシステムのデータを表示したいのであればJavaScriptしかないですが、  
別のシステム上でShopifyのデータを表示したいのであればShopifyAPIを取得して自由に使えると思います。

---

<div class="post-metadata">

**Author:** ![heine](https://avatars.discourse-cdn.com/v4/letter/h/278dde/32.png) [@heine](https://community.shopify.com/u/heine)\
**Post date:** [April 26, 2021, 6:01pm UTC](https://community.shopify.com/t/api-liquid/43848/3 "2021-04-26T18:01:31Z")

</div>

回答いただきましてありがとうございました。やはりLiquidでは別のシステムから持ってくることはできないのですね。  
前述の通り、headlessにするにはアプリ側で制限がありますし、  
カスタムアプリを作成することも考えたのですが、その場合URLの自由度が下がるため、順当にjavascript内で実行することにします。

この度は本当に助かりました。またよろしくお願いいたします。
