Gatsby中GraphQL查询无法读取pageContext的id变量问题

• 动态GraphQL查询在GraphiQL中可正常运行，但进入页面前抛出错误：schema.mjs:25 Uncaught (in promise) Error: Expected undefined to be a GraphQL schema，组件内打印的data始终为undefined
• 尝试用location.state传递博客数据，生产构建直接失败；开启gatsby-config.js中的DEV_SSR: true后刷新页面，页面无法加载，返回内容：{ codeFrame: "No codeFrame could be generated", sourcePosition: null, sourceContent: null }
• 页面由其他页面的组件按钮跳转进入，当前代码如下：

// Blogs Article Page
const Articles = ({ location, data, pageContext }) => {
  console.log("data:", data); // undefined

  // this has the correct id that I expected to be used for the graphql query
  console.log("id", pageContext.id);
  
  return (
    <>
      <Layout location={location}>
        <FullArticlepage blog={location.state} />
      </Layout>
    </>
  );
};

export const Head = () => <Seo title="Articles" />;
export default Articles;

export const articleQuery = graphql`
  query ($id: String) {
    mongodbHitsWebsiteBlogs(id: { eq: $id }) {
      id
      image
      publishDate
      title
      author
      content
      heading
    }
  }
`;

• 预期效果：当查询正常返回数据时，用data.mongodbHitsWebsiteBlogs替代location.state渲染博客内容

内容的提问来源于stack exchange，提问作者Fav