8.SIMILAR
Fetch similar products for a given product identifier.
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.
query {
product(id: "8S-DEMO-Polohemd-1") {
similarProducts(first: 8) {
edges {
node {
id
}
}
}
}
}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"}'{
"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"
}
}
]
}
}
}
}
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.
```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
}
}
}
}
}
}
}
}
}
```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}"}'{
"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"
}
}
}
]
}
}
}
]
}
}
}
}
Last updated
Was this helpful?