CODEWITHSUNDEEP
htmlreactjsgraphqlgatsby
omgitsnickt
omgitsnickt

Reputation: 45

graphql query not rendering to page


    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

Upvotes: 1

Views: 169

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

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>
)

Upvotes: 1

Related Questions