Create an index of WordPress posts

src/pages/index.js

@@ -1,21 +1,41 @@
 import React from 'react'
-import { Link } from 'gatsby'
+import { Link, graphql } from 'gatsby'
 
 import Layout from '../components/layout'
-import Image from '../components/image'
 import SEO from '../components/seo'
 
-const IndexPage = () => (
+const IndexPage = ({data}) => (
   <Layout>
     <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div>
-    <Link to="/page-2/">Go to page 2</Link>
+    <h1>Welcome to the Gatsby demo</h1>
+    <h3>There are {data.allWordpressPost.totalCount} posts</h3>
+    {data.allWordpressPost.edges.map(({ node }) => (
+      <div key={node.id}>
+        <Link to={node.slug}>
+          <h4><span dangerouslySetInnerHTML={{ __html: node.title}} /> - {node.date}</h4>
+        </Link>
+
+        <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
+      </div>
+    ))}
   </Layout>
 )
 
 export default IndexPage
+
+export const pageQuery = graphql`
+  query {
+    allWordpressPost(sort: { fields: [date], order: DESC }) {
+      totalCount
+      edges {
+        node {
+          id
+          title
+          excerpt
+          slug
+          date(formatString: "Do MMMM")
+        }
+      }
+    }
+  }
+`