商品一覧を表示する機能で検索を実現する方法について

[kandatsu]

前提

現在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できる対象ではないようです…。