Ecommerce Shopify WordPress Discussion

Shopify storefront api – productByHandle not working, returning undefined

I'm following through this tutorial:https://youtu.be/xNMYz74zNHM?si=i6rP7ytJzHHzDwIc I can get handle from the path - it is shown in url and I've checked with console.log. But the productByHandle is not working. Error message: Error fetching product data: TypeError: Cannot read properties of undefined (reading 'productByHandle') at getStaticProps (webpack-internal:///./pages/products/[handle].js:375:31) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) GraphQl queries: const handleQuery = gql` query Products { products(first: 10) { edges { node { handle } } } } ` const singleProductQuery = gql` query SingleProduct($handle: String!) { productByHandle(handle: $handle) { title handle updatedAt priceRangeV2 { minVariantPrice { amount } } images(first: 1) { edges { node { transformedSrc altText } } } } } ` Methods: export async function getStaticPaths() { try { const { data } = await storefront(handleQuery) console.log("Path data:", data.products.edges); return { paths: data.products.edges.map(product => ( { params: { handle: product.node.handle } } )), fallback: false, }} catch (error) { console.error("Error fetching handle path: ", error); return { paths: [{ params: { handle: null } }] } } } export async function getStaticProps({params}) { try { const { data } = await storefront(singleProductQuery, {handle: params.handle}) console.log("Response data:", data); return { props: { product: data.productByHandle, } }; } catch (error) { console.error("Error fetching product data:", error); return { props: { product: null, // Handle the error case with a default value or null }, }; } } I have another page using products query, which is working fine. I've also tried replacing the {handle:params.handle} in getStaticProps() with one of my handle name 'gift-card', but it would return the same error. Also permission for products are all available. So it shouldn't be a problem.. I don't know what I'm missing!
IIRC I think they deprecated that call and it no longer works in recent releases. You can apparently just provide a handle to the regular product call instead if you want. Have you tried that? Are you sure your calls and API version you're using are still valid for 2023-07 or newer?

December 30, 2023

This query call is deprecated in storefront API, you can check the information about this at this link: https://shopify.dev/docs/api/storefront/2023-07/queries/productByHandle Shopify encourages you to use this query: https://shopify.dev/docs/api/storefront/2023-07/queries/product example: { product(handle: $handle) { handle } } PS But this method doesn't work on shopify GraphQL(not storefront).

December 30, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.