无法获取文章ID-createPages

Question

我正在尝试创建新页面并根据文章ID显示相关数据。但是，我遇到了问题。现在，我创建一个Slug / id，它会打开我的文章模板并创建一个在浏览器窗口中可见的链接。

我无法在那些文章页面上显示任何相关数据。我想要的是找到页面的ID，并显示与该ID相关的信息。到目前为止，这是我的配置：

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;
  })
}

文章模板：

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"><a href="/">Highlighted</a></li>
                  <li className="list-inline-item"><a href="/">Innovation</a></li>
                  <li className="list-inline-item"><a href="/">Web Only</a></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 <a href="/">Jane Doe</a> | Photos by <a href="/">ISTOCK</a></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`,
      },
    },
...