indexPage-2.js

import React from "react"
import { graphql, StaticQuery} from 'gatsby';

import Layout from "../components/layout"
import SEO from "../components/seo"

import Heart from "../images/like.png"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <StaticQuery
    query={graphql`
      query TwitterPosts {
        allTwitterStatusesUserTimelineGetPosts {
          edges{
            node{
              full_text
              entities{
                urls{
                  url
                }
              }
              created_at
              favorite_count
            }
          }
        }
      }
    `}
    render={(data) => (
        <div>
          {
            data.allTwitterStatusesUserTimelineGetPosts.edges.map((item, i) => (
              <div key={i} style={{
                border: '2px solid rebeccapurple', borderRadius: '5px', 
                marginBottom: '20px', padding: '20px'
              }}>
                {item.node.full_text}
                <div style={{
                  display: 'flex', flexDirection: 'row', 
                  justifyContent: 'flex-start', alignItems: 'center'
                }}>
                  <div>
                    {item.node.created_at}
                  </div>
                  <div style={{
                    display: 'flex', flexDirection: 'row', justifyContent: 'center',
                    alignItems: 'center', marginLeft: '20px'
                  }}>
                    <img src={Heart} style={{width: '15px', margin: 0}}/>
                    {item.node.favorite_count}
                  </div>
                </div>
              </div>
              ) 
            )          
          }
          </div>
      )}
  />
  </Layout>
)

export default IndexPage