unable to get article id - createPages - reactjs

Question

I am trying to create new pages and display related data based on the article ID. But, I am running into issues. Right now I create a slug/id which brings up my article template and creates a link seen in the browser window.
I am not able to display any related data on those article pages. What I want is to find the ID of the page and show the information related to that ID. This is my configuration so far:
gatsby-node.js:
const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const articleTemplate = path.resolve(`./src/templates/article.js`)
return graphql(`
{
umdHub {
articles {
data {
id
title
subtitle
body
summary
hero_image {
url_1200_630
}
authorship_date {
formatted_short
unix
unix_int
formatted_long
formatted_short
time
}
slug
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Create blog post pages.
result.data.umdHub.articles.data.forEach(data => {
createPage({
path: `/articles/${data.slug}-${data.id}`,
component: articleTemplate,
id: data.id,
context: {
slug: `/articles/${data.slug}-${data.id}`
},
})
})
return;
})
}
Article template:
import React from 'react'
import { graphql } from 'gatsby'
import { ListGroup, ListGroupItem } from 'reactstrap';
// eslint-disable-next-line
import Layout from "../components/layout"
import Header from "../components/header"
import Footer from "../components/footer"
export default ({ data }) => {
console.log(data)
return (
<div>
<Header />
<div className="container spaces article">
<div className="row">
<section className="col-md-9">
<div className="tag-list">
<ul className="list-inline">
<li className="list-inline-item">Highlighted</li>
<li className="list-inline-item">Innovation</li>
<li className="list-inline-item">Web Only</li>
<li className="list-inline-item">February 28, 2019</li>
</ul>
</div>
<h1>hello</h1>
{data.umdHub.articles.data.map((article) => (
<div>
<h1>{article.title}</h1>
</div>
))}
<div className="row article-content">
<div className="col-md-10 offset-md-1">
<h2 className="subheader">Subtitle</h2>
<div className="author">
<p>By Jane Doe | Photos by ISTOCK</p>
<hr />
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<aside className="col-md-3">
<div>
<ListGroup flush>
<ListGroupItem disabled tag="a" href="#">Recent Posts</ListGroupItem>
<ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
<span>February 27, 2019</span>
</ListGroup>
</div>
</aside>
</div>
</div>
<Footer />
</div>
)
}
export const query = graphql`
query($id:String!) {
umdHub {
articles(id: $id) {
data {
id
title
subtitle
body
summary
hero_image {
url_1200_630
}
}
}
}
}
`
gatsby-config.js:
plugins: [
{
resolve: `gatsby-source-graphql`,
options: {
typeName: `HUBAPI`,
fieldName: `umdHub`,
url: `https://umd-hub-middleware.herokuapp.com/graphql`,
},
},
...