# 8.SIMILAR ## What we want to build We want to show a slider with up to 8 similar products on our product page.
## GraphQL query and response - id only To ensure that you show the most recent data in you shop you should only query the product ids and fetch the rest of the data you need for your UI from your own database. {% tabs %} {% tab title="GraphQL query" %} ```graphql query { product(id: "8S-DEMO-Polohemd-1") { similarProducts(first: 8) { edges { node { id } } } } } ``` {% endtab %} {% tab title="cURL request" %} {% code overflow="wrap" %} ```bash curl --request POST \ --url https://api.8select.io/graphql \ --header 'Content-Type: application/json' \ --header 'x-api-id: db54750f-80fc-4818-9455-30ca233225dc' \ --data '{"query":"query {\n product(id: \"8S-DEMO-Polohemd-1\") {\n similarProducts(first: 8) {\n edges {\n node {\n id\n }\n }\n }\n\t}\n}\n"}' ``` {% endcode %} {% endtab %} {% tab title="response" %} ```json { "data": { "product": { "similarProducts": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-10" } }, { "node": { "id": "8S-DEMO-Polohemd-9" } }, { "node": { "id": "8S-DEMO-Polohemd-7" } }, { "node": { "id": "8S-DEMO-Polohemd-8" } }, { "node": { "id": "8S-DEMO-Polohemd-2" } }, { "node": { "id": "8S-DEMO-Polohemd-3" } }, { "node": { "id": "8S-DEMO-Polohemd-4" } }, { "node": { "id": "8S-DEMO-Polohemd-5" } } ] } } } } ``` {% endtab %} {% endtabs %} ## GraphQL query and response - full data In case you can not make the extra roundtrip you can actually query all the data that is required to render a basic UI. {% tabs %} {% tab title="GraphQL query" %} ````graphql ```groovy query { product(id: "8S-DEMO-Polohemd-1") { similarProducts(first: 5) { edges { node { id brand images { edges { node { url } } } modelId name tags url variants { edges { node { id variantId manufacturerSuggestedRetailPrice { amount currencyCode } price { amount currencyCode } } } } } } } } } ``` ```` {% endtab %} {% tab title="cURL request" %} {% code overflow="wrap" %} ```bash curl --request POST \ --url https://api.8select.io/graphql \ --header 'Content-Type: application/json' \ --header 'x-api-id: db54750f-80fc-4818-9455-30ca233225dc' \ --data '{"query":"query {\n product(id: \"8S-DEMO-Polohemd-1\") {\n similarProducts(first: 5) {\n edges {\n node {\n id\n brand\n images {\n edges {\n node {\n url\n }\n }\n }\n modelId\n name\n tags\n url \n variants {\n edges {\n node {\n id\n variantId\n manufacturerSuggestedRetailPrice {\n amount\n currencyCode\n }\n price {\n amount\n currencyCode\n }\n \n }\n }\n }\n }\n }\n }\n }\n}"}' ``` {% endcode %} {% endtab %} {% tab title="response" %} ```json { "data": { "product": { "similarProducts": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-10", "brand": "8select Fashion", "images": { "edges": [ { "node": { "url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-10.jpg" } } ] }, "modelId": "8S-DEMO-Polohemd", "name": "Polohemd Alternative 10", "tags": [ "sale", "sale_discount_4" ], "url": "https://www.8select.com/", "variants": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-10-M", "variantId": "M", "manufacturerSuggestedRetailPrice": { "amount": "155.55", "currencyCode": "EUR" }, "price": { "amount": "150.00", "currencyCode": "EUR" } } } ] } } }, { "node": { "id": "8S-DEMO-Polohemd-9", "brand": "8select Fashion", "images": { "edges": [ { "node": { "url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-9.jpg" } } ] }, "modelId": "8S-DEMO-Polohemd", "name": "Polohemd Alternative 9", "tags": [ "sale", "sale_discount_4" ], "url": "https://www.8select.com/", "variants": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-9-M", "variantId": "M", "manufacturerSuggestedRetailPrice": { "amount": "155.55", "currencyCode": "EUR" }, "price": { "amount": "150.00", "currencyCode": "EUR" } } } ] } } }, { "node": { "id": "8S-DEMO-Polohemd-7", "brand": "8select Fashion", "images": { "edges": [ { "node": { "url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-7.jpg" } } ] }, "modelId": "8S-DEMO-Polohemd", "name": "Polohemd Alternative 7", "tags": [ "sale", "sale_discount_4" ], "url": "https://www.8select.com/", "variants": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-7-M", "variantId": "M", "manufacturerSuggestedRetailPrice": { "amount": "155.55", "currencyCode": "EUR" }, "price": { "amount": "150.00", "currencyCode": "EUR" } } } ] } } }, { "node": { "id": "8S-DEMO-Polohemd-8", "brand": "8select Fashion", "images": { "edges": [ { "node": { "url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-8.jpg" } } ] }, "modelId": "8S-DEMO-Polohemd", "name": "Polohemd Alternative 8", "tags": [ "sale", "sale_discount_4" ], "url": "https://www.8select.com/", "variants": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-8-M", "variantId": "M", "manufacturerSuggestedRetailPrice": { "amount": "155.55", "currencyCode": "EUR" }, "price": { "amount": "150.00", "currencyCode": "EUR" } } } ] } } }, { "node": { "id": "8S-DEMO-Polohemd-2", "brand": "8select Fashion", "images": { "edges": [ { "node": { "url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd.png" } } ] }, "modelId": "8S-DEMO-Polohemd", "name": "Polohemd Alternative 2", "tags": [ "sale", "sale_discount_4" ], "url": "https://www.8select.com/", "variants": { "edges": [ { "node": { "id": "8S-DEMO-Polohemd-2-M", "variantId": "M", "manufacturerSuggestedRetailPrice": { "amount": "155.55", "currencyCode": "EUR" }, "price": { "amount": "150.00", "currencyCode": "EUR" } } }, { "node": { "id": "8S-DEMO-Polohemd-2-L", "variantId": "L", "manufacturerSuggestedRetailPrice": { "amount": "155.55", "currencyCode": "EUR" }, "price": { "amount": "150.00", "currencyCode": "EUR" } } } ] } } } ] } } } } ``` {% endtab %} {% endtabs %}