I am building a Hydrogen store for my client which are high end watch resellers. I wanted to use the predictive search api to dynamically show the different watches (products) and suggestions (queries) to create a reactive user experience of looking through the catalog of products. I’m not sure exactly how my products get indexed for the search but that seems to be the issue or my best guess of where the unexpected behavior is coming from. IE searching for “Rolex”
If this is my query with
query predictiveSearchApi($country: CountryCode, $language: LanguageCode, $limit: Int!, $limitScope: PredictiveSearchLimitScope!, $searchTerm: String!, $types: [PredictiveSearchType!], $searchableFields: [SearchableField!]) @inContext(country: $country, language: $language) { predictiveSearch( limit: $limit limitScope: $limitScope query: $searchTerm searchableFields: $searchableFields types: $types ) { products { __typename id title handle availableForSale tags priceRange { minVariantPrice { amount currencyCode } } images(first: 1) { nodes { id url altText width height } } } queries { __typename text styledText trackingParameters } } }
With these params
{ "limit": 10, "limitScope": "EACH", "searchTerm": "Ro", "types": [ "PRODUCT", "QUERY" ], "searchableFields": ["BODY", "TITLE", "TAG", "PRODUCT_TYPE" ], "country": "AU", "language": "EN" }
and get these results:
{ "data": { "predictiveSearch": { "products": [ { "__typename": "Product", "id": "gid://shopify/Product/8180611776689", "title": "Rolex", "handle": "rolex-11", "availableForSale": true, "tags": [], "priceRange": { "minVariantPrice": { "amount": "12888.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37425589977265", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/Rolex_Datejust36Green_ROL12112403DP_f.jpg?v=1732589320", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8180604043441", "title": "Rolex", "handle": "rolex-10", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "25888.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37425503830193", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/Rolex_DJ41TTRGGreyMotif_ROL11012401CM_f.jpg?v=1732588456", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8180591886513", "title": "Rolex", "handle": "rolex-9", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "29888.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37425345331377", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/Rolex_DaytonaWhite_ROL15112406CM_f.jpg?v=1732587651", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8168769814705", "title": "Rolex", "handle": "rolex-7", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "56500.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37240115953841", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/rolex_ghost_xxx_f.jpg?v=1730759838", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8168762835121", "title": "Rolex", "handle": "rolex-2", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "1010.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37240076042417", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/rolex_blk_gold_silver_xxx_f.jpg?v=1730759446", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8164564304049", "title": "Rolex", "handle": "rolex-yachmaster", "availableForSale": true, "tags": [], "priceRange": { "minVariantPrice": { "amount": "22888.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37197503889585", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/rolex_yachtmaster_xxx_f.jpg?v=1730246044", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8158823940273", "title": "Rolex", "handle": "rolex-ladies", "availableForSale": true, "tags": [], "priceRange": { "minVariantPrice": { "amount": "43888.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37166518042801", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/rolex_ladies_datejust_28_mop_f.jpg?v=1729896693", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8164852564145", "title": "Rolex", "handle": "rolex-op-36-green", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "13500.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37221639684273", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/roles_op41g_xxx_f_2_98f3f5f5-18fe-4d1f-bde3-7a5f7b9d6417.jpg?v=1730495267", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8157598843057", "title": "Rolex", "handle": "rolex-cosmograph-daytona-black-dial-two-tone", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "31000.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37240201609393", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/rolex_daytona_gold_black_ROL07102405CM_f_2.jpg?v=1730760787", "altText": null, "width": 2500, "height": 3000 } ] } }, { "__typename": "Product", "id": "gid://shopify/Product/8185330041009", "title": "Rolex", "handle": "rolex-14", "availableForSale": false, "tags": [], "priceRange": { "minVariantPrice": { "amount": "17888.0", "currencyCode": "AUD" } }, "images": { "nodes": [ { "id": "gid://shopify/ProductImage/37475053273265", "url": "https://cdn.shopify.com/s/files/1/0658/4247/9281/files/Rolex_Datejust36Blue_ROL25112405CM_f_5503e2f0-5ede-4ec0-b13d-964de0b25369.jpg?v=1733275810", "altText": null, "width": 2500, "height": 3000 } ] } } ], "queries": [ { "__typename": "SearchQuerySuggestion", "text": "ross", "styledText": "<mark>ro</mark><span>ss</span>", "trackingParameters": "_pos=1&_psq=Ro&_ss=e&_v=1.0" } ] } }, "extensions": { "context": { "country": "AU", "language": "EN" } } }
The Products seem fine but the queries is where I get confused. I would except to see “Rolex” and then the “Bell & Ross” which is the full title of a product but for some reason the “queries”: [
{
“__typename”: “SearchQuerySuggestion”,
“text”: “ross”,
“styledText”: “ross”,
“trackingParameters”: “_pos=1&_psq=Ro&_ss=e&_v=1.0”
}
] this being my only query result doesn’t make sense to me.