mcpField
S
shopify-hydrogen

shopify-hydrogen

github.com/weaverse開発93154 回インストール4 週間前に更新
リポジトリ

shopify-hydrogen について

React Router v7 と Storefront API を使った Shopify Hydrogen ストアフロント構築向けのリファレンススキルです。API ガイドやオフライン資料に加え、Shopify の最新開発者ドキュメントを検索するスクリプトを備えています。

主な機能

  1. 01Hydrogen の設定とコンテキスト案内
  2. 02カートハンドラーとフォームのパターン
  3. 03キャッシュ戦略のリファレンス
  4. 04SEO、ページネーション、サイトマップの案内
  5. 05Shopify の最新ドキュメント検索

活用シーン

  1. 01Hydrogen サービスの設定
  2. 02カート操作の実装
  3. 03ストアフロントのキャッシュ方針選定
  4. 04最新の Hydrogen API の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/weaverse/shopify-hydrogen-skills --skill shopify-hydrogen

インストール後、Claude Code で/shopify-hydrogenを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
01-setup.md
02-caching.md
03-cart.md
04-ssr-performance.md
scripts/
check_docs_helpers.mjs
get_weaverse_page.mjs
search_shopify_docs.mjs
search_weaverse_docs.mjs

詳細

Shopify Hydrogen

Hydrogen は、React Router v7 を基盤とする、ヘッドレスコマース向けの Shopify 独自の方針を持つスタックです。Shopify Storefront API を利用したストアフロントの構築に役立つユーティリティ、ハンドラー、コンポーネントを提供します。

すべてのエクスポートは @shopify/hydrogen から提供されます。このパッケージは @shopify/hydrogen-react のすべての機能を再エクスポートします。

ソース：https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen/src

ライブドキュメント

このスキルのフォルダーから以下を実行してください。以下のパスはスキルのルートからの相対パスです。

最新の Hydrogen API ドキュメントを確認するには、検索スクリプトを使用してください。

node scripts/search_shopify_docs.mjs "<query>"

このスクリプトは Shopify の開発者向けドキュメント（shopify.dev）を直接検索し、Hydrogen の最新の API リファレンス、コード例、ガイドを返します。

使用例：

node scripts/search_shopify_docs.mjs "createHydrogenContext"
node scripts/search_shopify_docs.mjs "CartForm actions"
node scripts/search_shopify_docs.mjs "caching strategies"
node scripts/search_shopify_docs.mjs "getSeoMeta"
node scripts/search_shopify_docs.mjs "Pagination component"

オフラインまたはキャッシュされたリファレンスについては、以下の references/ フォルダーを参照してください。

主な概念（クイックリファレンス）

createHydrogenContext

server.ts ですべての Hydrogen サービスを設定するための唯一のエントリーポイントです。storefront、customerAccount、cart を作成し、相互に接続します。

  • 必須の環境変数：PUBLIC_STORE_DOMAIN、PUBLIC_STOREFRONT_API_TOKEN、PRIVATE_STOREFRONT_API_TOKEN、PUBLIC_STOREFRONT_ID、PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID、SHOP_ID
  • 戻り値：{ storefront, customerAccount, cart }
キャッシュ戦略
戦略maxAgestaleWhileRevalidate用途
CacheNone()——ユーザー固有のデータ、またはリアルタイムデータ
CacheShort()1s9s頻繁に変更されるデータ
CacheLong()1hr23hr安定したデータ（ショップ情報、メニュー）
CacheCustom({...})カスタムカスタム細かな制御
カートハンドラー

createCartHandler は、get、create、addLines、updateLines、removeLines、updateDiscountCodes、addGiftCardCodes、updateBuyerIdentity、updateNote、setMetafields など、カートのすべての操作を提供します。

CartForm

カートを変更するためのフォームコンポーネントです。CartForm.ACTIONS 列挙型（LinesAdd、LinesUpdate、LinesRemove、DiscountCodesUpdate など）を使用し、React Router の useFetcher 経由で送信します。

useOptimisticCart

保留中のカート変更をローカルで適用し、UI に即座に反映します。LinesAdd の入力に selectedVariant が必要です。

ページネーション

getPaginationVariables(request, { pageBy }) と <Pagination connection={...}> コンポーネントを使用します。GraphQL クエリには pageInfo { hasPreviousPage hasNextPage startCursor endCursor } を含める必要があります。

SEO

getSeoMeta(...) は React Router の meta 配列を生成します。title、titleTemplate、description、url、media、jsonLd、robots、alternates に対応しています。jsonLd はルート間で連結されます。

サイトマップ

getSitemapIndex と getSitemap を使用して、2 階層のサイトマップを生成します。Storefront API 2024-10 以降が必要です。

コンテンツセキュリティポリシー

createContentSecurityPolicy({ shop: { checkoutDomain, storeDomain } }) は { nonce, header, NonceProvider } を返します。

リファレンス

検索スクリプトを使用できない場合のオフラインまたはキャッシュされたリファレンス：

ファイル内容
references/01-setup.mdserver.ts の完全な設定、環境変数、セッション、createHydrogenContext のオプション
references/02-caching.mdキャッシュ戦略、AllCacheOptions 型、generateCacheControlHeader
references/03-cart.mdカートルートの設定、CartForm の例、useOptimisticCart のパターン
references/04-ssr-performance.mdSSR バンドルの軽量化（ワーカーが動的インポートをインライン化する場合の resolveId スタブパターン）、バンドル監査、TTFB の測定方法

コメント

Markdown 対応