Shopify アプリに関する話題はこちら
前提
現在Shopifyアプリを開発しています。
アプリの機能として商品一覧を表示して、各商品ごとにアクションを行えるような画面を作成しています。
実際には商品といってもProduct単位ではなくVariant単位です。
GraphQLにてShopify Admin APIに対して下記のようにリクエストすることで、必要な情報の取得とページング(といっても前後移動のみ)は実現できました。
1ページに表示する25件で上限を設定しています。
query($max: Int, $cursor: String) {
productVariants(last: $max, before: $cursor, query: "product_status:active") {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
product {
id
title
media(first: 1) {
edges {
node {
preview {
image {
originalSrc
}
}
}
}
}
}
image {
originalSrc
}
title
sku
}
}
}
}
※variant+productの情報を一回でリクエストしています。
ただ、この上でproductのtitleとvariantのtitle両方で画面から任意の文字で検索をしたいです。
それで考えたのが下記のクエリです。
query($max: Int, $cursor: String) {
productVariants(last: $max, before: $cursor, query: "product_status:active title:検索したいVariant名") {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
product(query: "title:検索したいProduct名") {
id
title
media(first: 1) {
edges {
node {
preview {
image {
originalSrc
}
}
}
}
}
}
image {
originalSrc
}
title
sku
}
}
}
}
Variantのqueryでtitleの指定をするのは出来たのですが、Productのqueryを加えるとエラーになりました。
productは複数ではなく単一の要素で、そもそもネストしている要素なのでqueryは指定できないみたいです。
質問内容
クエリで指定できないとなると、下記の選択になると思っています。
1. ProductとVariantを別で検索の上取得して、紐づくProductとVariantがどっちも残ったデータを表示対象とする
2. 全件のデータを取得してプログラムで検索する
3. Bulk Operationsで一気に全件取得してプログラムで検索する
1の方法だと1ページに表示する25件に足りるまで複数回APIをコールする必要があり、後続のデータがあっても検索に該当するか事前に分からないのでページングの実装が破綻します。
後続データの分の検索も行えば一応存在はチェックできますが、無駄に処理とAPIコールが増えて嫌な感じです…。
2の方法は複数回のAPIコールは同じく必要です。そもそもVariantの全件を取得するのはShopify APIのコスト的に上限超過する可能性があり、超過しないように時間を置いて繰り返し取得しようとすると画面のロード時間が極端に長くなる可能性があります。
3の方法はコールは一回ですがすぐにレスポンスされるわけではないようですし、ストアごとに同時に1回しか実行できないとのことなので多用すべきではないのかなと思っています。
内容的には既存のShopifyアプリでもありえる単純な要件だと思うのですが、調べてもなかなか良い情報にたどり着けません。
このような要件の場合に最適なリクエスト方法や実装方法についてご存知でしょうか?
variantのFieldで「displayName」というproductとvariantのtitleを合体した要素があったのですが、残念ながらqueryでfilterできる対象ではないようです…。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025