graphql query not rendering to page

Question


    console.log(data.allShopifyProductVariant.nodes[0].product.title)

    return (
        <div>
            <div>
                {data.allShopifyProductVariant.nodes.map(node => {
                    <div>
                        {node.product.title}
                    </div>
                
                })}
            </div>
        </div>
    )
}


export const query = graphql`
    query CollectionQuery {
        allShopifyProductVariant(filter: {product: {productType: {in: "20 lb. Plotter Paper"}}}) {
            nodes {
              compareAtPrice
              sku
              price
              product {
                title
                images {
                  gatsbyImageData(width: 150)
                }
                productType
              }
            }
          }
    }`

export default Collection;

Expecting this function to return the product title, for some reason it returns nothing. I've tried using dangerously set innerhtml but nothing comes up, no error. I am able to console.log the {node.product.title} and it returns exactly what I want to display but for some reason it is not rendering to the div. Any help is appreciated, thanks in advance :D

Ferran Buireu · Accepted Answer · 2021-08-13 05:08:07Z

1

You are missing the return statement:

return (
    <div>
        <div>
            {data.allShopifyProductVariant.nodes.map(node => {
                return <div>
                    {node.product.title}
                </div>
            
            })}
        </div>
    </div>
)

Or using the implicit return:

return (
    <div>
        <div>
            {data.allShopifyProductVariant.nodes.map(node => (
               <div>
                    {node.product.title}
                </div>
            
            ))}
        </div>
    </div>
)

answered Aug 13, 2021 at 5:08

Ferran Buireu

29.4k7 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

graphql query not rendering to page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related