Fetch more fields for events. Show the featured image

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "gatsby": "^2.0.0",
     "gatsby-awesome-pagination": "^0.3.3",
+    "gatsby-image": "^2.0.29",
     "gatsby-plugin-lodash": "^3.0.1",
     "gatsby-plugin-netlify": "^2.0.0",
     "gatsby-plugin-purgecss": "^3.1.0",

src/templates/event.js

@@ -3,16 +3,47 @@ import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Layout from '../components/Layout'
+import Img from 'gatsby-image'
 
 export const EventTemplate = ({
   content,
   title,
+  featuredMedia,
+  startTime,
+  endTime,
+  venue,
+  facebookUrl,
+  ticketUrl,
+  priceStudent,
+  priceOrdinary
 }) => {
   return (
     <section className="event">
         <h1 className="title">
             {title}
         </h1>
+        <div className="featured-image">
+          <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+        </div>
+        <div classname="start-time">
+            Start: {startTime}
+        </div>
+        <div className="end-time">
+            Slutt: {endTime}
+        </div>
+        <div className="venue">
+            Lokale: {venue}
+        </div>
+        <div className="facebook-url">
+            Facebook: {facebookUrl}
+        </div>
+        <div className="price">
+            Student: {priceStudent}
+            Ordinær: {priceOrdinary}
+        </div>
+        <div className="tickets">
+            Kjøp billett: {ticketUrl}
+        </div>
         <div dangerouslySetInnerHTML={{ __html: content }} />
     </section>
   )
@@ -21,6 +52,7 @@ export const EventTemplate = ({
 EventTemplate.propTypes = {
   content: PropTypes.node.isRequired,
   title: PropTypes.string,
+  featuredImage: PropTypes.object,
 }
 
 const Event = ({ data }) => {
@@ -30,12 +62,20 @@ const Event = ({ data }) => {
     <Layout>
       <Helmet title={`${event.title}`} />
       <EventTemplate
+        title={event.title}
         content={event.content}
+        featuredMedia={event.featured_media}
+        startTime={event.start_time}
+        endTime={event.start_time}
+        venue={event.venue}
+        facebookUrl={event.facebook_url}
+        ticketUrl={event.ticket_url}
+        priceStudent={event.price_member}
+        priceRegular={event.price_regular}
         // categories={post.categories}
         // tags={post.tags}
-        title={event.title}
         // date={post.date}
-        //author={post.author}
+        // author={post.author}
       />
     </Layout>
   )
@@ -62,8 +102,22 @@ export const eventQuery = graphql`
       title
       slug
       content
-      start_time(formatString: "MMMM DD, YYYY")
-      end_time(formatString: "MMMM DD, YYYY")
+      start_time
+      end_time
+      venue
+      facebook_url
+      ticket_url
+      price_member
+      price_regular
+      featured_media {
+        localFile {
+          childImageSharp {
+            fluid(maxWidth: 800) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
     }
   }
 `

yarn.lock

@@ -5131,6 +5131,14 @@ gatsby-cli@^2.4.9:
     yargs "^11.1.0"
     yurnalist "^1.0.2"
 
+gatsby-image@^2.0.29:
+  version "2.0.29"
+  resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-2.0.29.tgz#38475842b6e9a5d58c4e3bec875179b959c7d7ab"
+  integrity sha512-kMB/MUbm3qPlioJL8lVhLy000W7a6fA0DKpyTS1MtpixoAJKxwBTmXv+EYZPFizazRbmpHaCXzq3kk9qMhEEeQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    prop-types "^15.6.1"
+
 gatsby-link@^2.0.10:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-2.0.10.tgz#40cc99c3e62e20c52b5672ad6f4647058a198190"