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!