Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Update: I figured it out -- GraphQL aliases. Woo! See the end for the answer.
I'm using trying to get a GraphQL query working to get multiple products store availability.
The document found here https://shopify.dev/custom-storefronts/products-collections/local-pickup gives an example for a single product, like this:
query GetStoreAvailability {
product(id: "gid://shopify/Product/61251315551") {
variantBySelectedOptions(selectedOptions: {name: "Color", value: "White"}) {
storeAvailability(first: 1) {
edges {
node {
available
pickUpTime
location {
name
}
}
}
}
}
},
}
This works well enough for a single product, but what if we want to get multiple products?
So far this is the best solution I've found:
query GetStoreAvailability {
products(first: 150) {
nodes {
handle
variants(first:20) {
edges {
node {
availableForSale
storeAvailability(first:20) {
edges {
node {
available
pickUpTime
location {
name
}
}
}
}
}
}
}
}
}
}
This also works, but this is slower at 1055ms response time, larger at 23.34kb response size vs the above which is 219ms/1.83kb.
I realize the second version is what GraphQL is supposed to avoid by specifying what we need in the response. I've tried some variations of this, but I'm having no luck. Ideally we could use a GraphQL query to get multiple products by handle or id. Something like this:
query GetStoreAvailability {
product(id: "gid://shopify/Product/555555555") {
variantBySelectedOptions(selectedOptions: {name: "Color", value: "White"}) {
storeAvailability(first: 1) {
edges {
node {
available
pickUpTime
location {
name
}
}
}
}
}
},
product(id: "gid://shopify/Product/1212121212") {
variantBySelectedOptions(selectedOptions: {name: "Color", value: "White"}) {
storeAvailability(first: 1) {
edges {
node {
available
pickUpTime
location {
name
}
}
}
}
}
},
}
Any feedback would be great! Thank you in advance.
------------------------------
I found my answer in some Shopify documentation for using aliases https://shopify.dev/api/admin-graphql/2023-01/queries/products#examples-Get_two_specific_products_by.... Here's my query:
{
glasses: product(id: "gid://shopify/Product/123456789") {
title
description
variants(first: 5) {
edges {
node {
availableForSale
storeAvailability(first: 5) {
edges {
node {
available
pickUpTime
location {
name
address {
latitude
longitude
}
}
}
}
}
}
}
}
}
shoes: product(id: "gid://shopify/Product/789456123") {
title
description
variants(first: 5) {
edges {
node {
availableForSale
storeAvailability(first: 5) {
edges {
node {
available
pickUpTime
location {
name
address {
latitude
longitude
}
}
}
}
}
}
}
}
}
}
Total size is 2.51kb and response time is 338ms.