CartLine の viewKey がレスポンスで読める
送ったキーをそのまま返す。UUID変換の手間がゼロに。
Storefront API の CartLine タイプに viewKey フィールドが追加されました。これまで cartLinesUpdate や cartLinesRemove への入力時にのみ使用できた viewKey が、クエリのレスポンスでも返ってくるようになります。Liquid ストアフロントで描画済みの行と API レスポンスの行を、UUID を介さずに直接照合できます。
01Before / After — viewKey の扱いの変化
USE CASES02業務に活かせる具体ユースケース
- 課題
- Liquid テンプレートで行に独自のキー(商品バリアント+オプション組み合わせIDなど)を付与しているが、JS側の Cart AJAX APIレスポンスでは UUID しか返らず、どの行がどのキーか管理テーブルを別途保持していた。
- 打ち手
-
CartLine.viewKeyをクエリに追加し、Liquid が生成した viewKey をそのままレスポンスで照合する。 - 効果
- クライアントサイドのマッピングオブジェクトが不要になり、コードと状態管理がシンプルになる。
- 技術メモ
- Storefront API の
cartクエリにviewKeyフィールドを追記するだけ。既存の UUID ベースのロジックはそのまま動作する。
- 課題
- カスタム Headless ストアフロントで、カート行の削除ボタンを押した際に
cartLinesRemoveへ渡す ID を特定するため、ページ初回ロード時に全行の UUID をローカルストレージにキャッシュしていた。ページ遷移後にキャッシュが失われると照合できなくなる問題があった。 - 打ち手
- 削除時に
viewKeyを入力として渡し、レスポンスのCartLine.viewKeyでリスト表示を更新する。UUID キャッシュをなくしてステートレスな設計に移行。 - 効果
- キャッシュ失効バグが根絶され、ページリロード後でも正確に行の状態を把握できるようになる。
- 技術メモ
-
cartLinesRemoveのレスポンスとして返るcart.linesにviewKeyを含めることで、削除後の行リストを viewKey 軸で管理できる。
- 課題
- 複数のカスタムアプリが同一カートを操作する構成で、それぞれのアプリが「自分が追加した行」を識別する際に UUID だけでは判断できず、メタフィールドや属性に識別子を付加する回避策を使っていた。
- 打ち手
- 各アプリが
cartLinesUpdate時に自アプリ固有の viewKey プレフィックスを付与し、クエリ結果のviewKeyでフィルタリングして自身の行だけを操作対象にする。 - 効果
- 属性への識別子埋め込みという設計上の妥協が不要になり、カート属性を本来の用途に専念させられる。
- 技術メモ
- viewKey はカートがすでに保持している値を返すため、新たなストレージコストは発生しない(元記事記載)。
03技術者が押さえるポイント
新フィールド
CartLine.viewKeyStorefront API の CartLine タイプに追加。id(UUID)と並んで返ってくる。クエリに明示的に追記する必要あり。
後方互換
UUID ベースの処理は変わらないid フィールドは従来どおり機能。viewKey を使わないアプリへの影響はゼロ。段階的移行が可能。
注意
入力専用から読み取りも可能にこれまで viewKey は cartLinesUpdate / cartLinesRemove の入力にのみ存在。今回のアップデートでクエリでも読めるようになった。
Liquid 連携
Liquid ストアフロントと同じ値CartLine.viewKey は Liquid ストアフロントが描画する viewKey と同一の値を返す(元記事記載)。Liquid↔API 間の整合性が取れる。
クエリ例
使い方はシンプルquery CartLines($cartId: ID!) {
cart(id: $cartId) {
lines(first: 10) {
edges {
node {
id
viewKey
}
}
}
}
}
ストレージ
追加コストなしviewKey はカートがすでに内部に保持している値を読むだけ。新たなストレージや処理コストは発生しない(元記事記載)。
「カート行の viewKey がレスポンスで読めるようになったことで、UUID 変換テーブルの管理が不要になり、Liquid と Headless の行照合ロジックを大幅に簡素化できます。」
Source: https://shopify.dev/changelog/cart-line-view-key-field | 公開日: 2026年6月12日






Share:
ShopユーザーメタフィールドをFunctionsで活用
AI Toolkitで拡張機能をPolaris WCへ移行