Hello everyone
I’m developing an ecommerce using Hydrogen w/ React and TS
I created my project from Shopify Admin and right now I’m trying to create a feature in the product view and on the cart: creating a block on the maximum quantity available of an product.
Example: I have 10 shirts on the white color and on the XS size. I need to bring this info on my frontend in order to block it.
I read the GraphQL API documentation. The Product object and the ProductVariant object
I’m bringing the whole product with the variants inside it, this is the query:
export const PRODUCT_FRAGMENT = `#graphql
fragment Product on Product {
id
title
vendor
handle
descriptionHtml
description
encodedVariantExistence
encodedVariantAvailability
productType
tags
createdAt
updatedAt
publishedAt
isGiftCard
requiresSellingPlan
availableForSale
priceRange {
minVariantPrice {
amount
currencyCode
}
maxVariantPrice {
amount
currencyCode
}
}
compareAtPriceRange {
minVariantPrice {
amount
currencyCode
}
maxVariantPrice {
amount
currencyCode
}
}
featuredImage {
id
url
altText
width
height
}
images(first: 20) {
nodes {
id
url
altText
width
height
}
}
media(first: 20) {
nodes {
... on MediaImage {
id
mediaContentType
image {
id
url
altText
width
height
}
}
... on Model3d {
id
alt
mediaContentType
sources {
url
format
mimeType
}
}
... on Video {
id
mediaContentType
sources {
url
format
mimeType
}
previewImage {
url
altText
width
height
}
}
}
}
category {
id
name
}
collections(first: 10) {
nodes {
id
title
handle
image {
url
altText
width
height
}
}
}
metafields(identifiers: [
{namespace: "custom", key: "material"},
{namespace: "custom", key: "care_instructions"},
{namespace: "custom", key: "especificacao"},
{namespace: "descriptors", key: "care_guide"}
]) {
id
namespace
key
value
type
}
options {
name
optionValues {
name
firstSelectableVariant {
...ProductVariant
}
swatch {
color
image {
previewImage {
url
}
}
}
}
}
selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
...ProductVariant
}
adjacentVariants (selectedOptions: $selectedOptions) {
...ProductVariant
}
variants(first: 100) {
nodes {
...ProductVariant
}
}
seo {
description
title
}
}
${PRODUCT_VARIANT_FRAGMENT}
` as const;
export const PRODUCT_VARIANT_FRAGMENT = `#graphql
fragment ProductVariant on ProductVariant {
availableForSale
compareAtPrice {
amount
currencyCode
}
id
image {
__typename
id
url
altText
width
height
}
price {
amount
currencyCode
}
product {
title
handle
}
selectedOptions {
name
value
}
sku
title
unitPrice {
amount
currencyCode
}
quantityAvailable
}
` as const;
So, as you can see, I’m bringing the quantityAvailable field to each variant
In the admin on Shopify, I created an custom app with those permissions:
And the documentation of ProductVariant says that I need the unauthenticated_read_product_inventory in order to read the `quantityAvailable` field
So I did this and right now I can read the quantityAvailable, but now I’m getting those issues
│ │
│ In Hydrogen’s storefront.query: │
│ │
│ Access denied for menu field. Required access: │
│ unauthenticated_read_content access scope. │
│ Request ID: 581f79b5-1a40-4b23-9bb1-1e0d35aee506-1756750753 │
│ │
│ To debug the query Header, try it in GraphiQL ( http://localhost:3000/gr │
│ aphiql?query=fragment%20Shop%20on%20Shop%20%7B%20id%20name%20description%2 │
│ 0primaryDomain%20%7B%20url%20%7D%20brand%20%7B%20logo%20%7B%20image%20%7B% │
│ 20url%20%7D%20%7D%20%7D%20%7D%20query%20Header(%20%24country%3A%20CountryC │
│ ode%20%24headerMenuHandle%3A%20String!%20%24language%3A%20LanguageCode%20) │
│ %20%40inContext(language%3A%20%24language%2C%20country%3A%20%24country)%20 │
│ %7B%20shop%20%7B%20…Shop%20%7D%20menu(handle%3A%20%24headerMenuHandle)%2 │
│ 0%7B%20…Menu%20%7D%20%7D%20fragment%20MenuItem%20on%20MenuItem%20%7B%20i │
│ d%20resourceId%20tags%20title%20type%20url%20%7D%20fragment%20ChildMenuIte │
│ m%20on%20MenuItem%20%7B%20…MenuItem%20%7D%20fragment%20ParentMenuItem%20 │
│ on%20MenuItem%20%7B%20…MenuItem%20items%20%7B%20…ChildMenuItem%20%7D%2 │
│ 0%7D%20fragment%20Menu%20on%20Menu%20%7B%20id%20items%20%7B%20…ParentMen │
│ uItem%20%7D%20%7D&variables=%7B%22headerMenuHandle%22%3A%22main-menu%22%2C │
│ %22country%22%3A%22US%22%2C%22language%22%3A%22EN%22%7D ). │
│ │
│ To investigate the issue, examine this stack trace: │
│ at loadCriticalData (app/root.tsx:137) │
│ at loader (app/root.tsx:84) │
│ at callRouteHandler (.vite/deps_ssr/react-router.js:10859) │
│ at loader (.vite/deps_ssr/react-router.js:11003) │
│ at actualHandler (.vite/deps_ssr/react-router.js:4598) │
│ at (.vite/deps_ssr/react-router.js:4609) │
│ at runHandler (.vite/deps_ssr/react-router.js:4614) │
│ at callLoaderOrAction (.vite/deps_ssr/react-router.js:4661) │
│ │
And I can’t enable those permissions on my app. Can someone help me ?
