Hydrogenプロジェクトを動かす
ルートとloaderでStorefront APIからデータを取り、商品ページを表示できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、ルートとloader（サーバー側でデータを取る関数）でStorefront APIから商品を取り、商品ページを表示できるようになります。
受託では、この「loaderで取得 → コンポーネントで描画」の形を1つ覚えれば、コレクションも検索も同じ型で作れます。
ファイル名がそのままURLになる
app/routes/products.$handle.tsxが/products/<handle>に対応します。
多言語なら($locale).products.$handle.tsxのように、省略できるセグメントを先頭に置きます。
loaderはサーバーで動く
loaderの中でcontext.storefront.query(QUERY, { variables, cache })を呼び、useLoaderDataで受け取ります。
取得はサーバー側で行われ、トークンはブラウザに出ません。
そのため、非公開トークンを使えます。
キャッシュはクエリごとに決める
CacheShort()（数秒）、CacheLong()（1日）、CacheNone()、CacheCustom()をクエリごとに指定します。
ナビゲーションは長く、在庫や価格は短くします。
発展：型生成と環境変数
#graphqlタグ付きのクエリから、npm run codegenでTypeScriptの型を生成します。
フィールド名の誤りを、ビルドの段階で捕まえられます。
環境変数はPUBLIC_STORE_DOMAIN PUBLIC_STOREFRONT_API_TOKEN PRIVATE_STOREFRONT_API_TOKEN SESSION_SECRETです。shopify hydrogen env pullで、Oxygenの値を取り込みます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。