product.js

import React from "react"
import { graphql } from "gatsby"

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

const Product = ({ data }) => (
  <Layout>
    <SEO title={data.wordpressWpProduct.title} />
    <h1>{data.wordpressWpProduct.edges[0].title}</h1>
    <p>{data.wordpressWpProduct.edges[0].excerpt}</p>
  </Layout>
)

export default Product
export const postQuery = graphql`
  query($id: String!) {
    allWordpressWpProduct(filter: { id: { eq: $id } }) {
      edges {
        node {
          id
          title
          excerpt
          date(formatString: "YYYY-MM-DD")
          link
          slug
        }
      }
    }
  }
`

const Product = ({ data }) => {
  const p = data.wordpressWpProduct;
  const first = p.edges[0];
  return (
    <Layout>
      <SEO title={p.title} />
      <h1>{first.title}</h1>
      <p>{first.excerpt}</p>
    </Layout>
  );
};