Cannot map data results from Query in React Page

hedleydonna
New Member
3 1 1

I am very new to creating apps. I have been able to create a simple app but can't get it to map through the results. The query works in the Shopify Graphiql App. In the component, it is retrieving the data, and I can see it in the console. But when I try to loop through the results to display on the the page, I get undefined message. I can't get the syntax proper. 

Here is the query: 

const GET_PRODUCTS = gql`
  query {
    products(first: 10){
      edges{
        node {
          id
          title
          tags
        }
      }
    }
  }
`;

 

Here is data returned: 

Here is data returned: 

{
    "products": {
        "edges": [
            {
                "node": {
                    "id": "gid://shopify/Product/6686521983181",
                    "title": "falling darkness",
                    "tags": [
                        "evelyn-hedley",
                        "market-bag"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522015949",
                    "title": "hidden bush",
                    "tags": [
                        "christina-nilsson"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522048717",
                    "title": "lively dew",
                    "tags": [
                        "sarah-murphy"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522081485",
                    "title": "misty flower",
                    "tags": [
                        "beanie",
                        "evie-hedley"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522114253",
                    "title": "small star",
                    "tags": [
                        "evelyn-hedley",
                        "tote-bag"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6687723749581",
                    "title": "Awesome Product",
                    "tags": [
                        "dress",
                        "rebecca-buist"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            }
        ],
        "__typename": "ProductConnection"
    }
}

 

Here is the the component where I need to understand the proper syntax:

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import {
  Card,
} from '@shopify/polaris';

// GraphQL query that retrieves products
const GET_PRODUCTS = gql`
  query {
    products(first: 10){
      edges{
        node {
          id
          title
          tags
        }
      }
    }
  }
`;

class ResourceListWithProducts extends React.Component {

  render() {
    const app = this.context;
    return (
      <Query query={GET_PRODUCTS} >
        {({ data, loading, error }) => {
          console.log(data);
          if (loading) return <div>Loading…</div>;
          if (error) return <div>{error.message}</div>;
          return (
            <>
              <Card>
                <h1>Hello worlds.</h1>
                {
                  data.nodes.map(item => {
                    return(
                      <p key={item.id}>
                        {item.title}
                      </p>
                    )
                  })
                }
              </Card>
            </>
          );
        }}
      </Query>
    );
  }
}

export default ResourceListWithProducts;

 

0 Likes