hitting contenta api

gatsby-config.js

@@ -1,6 +1,15 @@
 module.exports = {
   siteMetadata: {
-    title: 'Gatsby Default Starter',
+    title: 'Gatsby Drupal Starter',
   },
-  plugins: ['gatsby-plugin-react-helmet'],
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: `gatsby-source-drupal`,
+      options: {
+        baseUrl: `https://live-contentacms.pantheonsite.io/`,
+        apiBase: `api`,
+      },
+    },
+  ],
 }

package.json

@@ -7,6 +7,7 @@
     "gatsby": "^1.9.247",
     "gatsby-link": "^1.6.40",
     "gatsby-plugin-react-helmet": "^2.0.10",
+    "gatsby-source-drupal": "^2.0.37",
     "react-helmet": "^5.2.0"
   },
   "keywords": [

src/pages/index.js

@@ -1,13 +1,29 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const IndexPage = () => (
+const IndexPage = ({ data }) => (
   <div>
     <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <Link to="/page-2/">Go to page 2</Link>
+    <p>Welcome to your new Gatsby site that is getting data from Drupal.</p>
+    <p>
+      The list of recipe titles below is coming from a Contenta CMS site on
+      Patheon.
+    </p>
+    {data.allRecipes.edges.map(recipe => <div>{recipe.node.title}</div>)}
+    <Link to="/page-2/">Go to see another page</Link>
   </div>
 )
 
 export default IndexPage
+
+export const query = graphql`
+  query IndexPageQuery {
+    allRecipes {
+      edges {
+        node {
+          title
+        }
+      }
+    }
+  }
+`