由firebase身份验证保护的文章的Gatsby模板

Question

我一直在尝试使用带有受保护内容的GatsbyJS构建一个小站点，使用Firebase，遵循以下示例：https://github.com/taming-the-state-in-react/gatsby-firebase-authentication。我使用DatoCMS作为来源。我之前已经建立了博客，除了firebase认证部分之外，一切都是一样的，一切都运行得很好。

不知何故，我得到了我的模板文件中未定义数据的错误，其中生成了文章页面。

这是我的代码：

import React from 'react'
import AuthUserContext from '../components/Session/AuthUserContext';
import withAuthorization from '../components/Session/withAuthorization';
import { graphql } from 'gatsby';


const authCondition = authUser => !!authUser;

const WikiPageSingle = withAuthorization(authCondition)(() => (
    <AuthUserContext.Consumer>
      {authUser => (
        <div>
          <h1>{this.props.data.datoCmsArticle.id}</h1>
        </div>
      )}
    </AuthUserContext.Consumer>
))



export default withAuthorization(authCondition)(WikiPageSingle);

    export const query = graphql`
    query ArticlQuery ($slug: String!) {
    datoCmsArticle (slug: { eq: $slug }) {
          id
          title
          slug
          }
        }
  `;

我知道可能很难获得这方面的帮助，因为它是一个非常具体的问题，但任何想法或指针为什么这不适用于模板文件将非常感谢！

Answer 1

我设法通过为这些文章创建新布局并基本上保护该布局中的整个内容来使其工作。我仍然觉得必须有一个更优雅的解决方案，所以任何想法都非常受欢迎。与此同时，以下是我如何使用它，以防其他人在将来遇到此问题：

新布局组件：

import React from 'react';

import AuthUserContext from '../components/Session/AuthUserContext';
import withAuthorization from '../components/Session/withAuthorization';
import withAuthentication from './Session/withAuthentication';


const authCondition = authUser => !!authUser;

const ArticleLayout = withAuthorization(authCondition)(({children}) => (
  <AuthUserContext.Consumer>
    {authUser => (
      <div>
         {children}
      </div>
    )}
  </AuthUserContext.Consumer>
));

export default withAuthentication(ArticleLayout);

在这里我的模板文件夹中的模板：

import React from 'react';
import { graphql } from 'gatsby';
import ArticleLayout from '../components/articlelayout';

class BlogPost extends React.Component {
  render() {

    return (
      <ArticleLayout>
      <div>
          <h1>{this.props.data.datoCmsArticle.title}</h1>
      </div>
      </ArticleLayout>
    )
  }
}

export default BlogPost


export const query = graphql`
  query PostQuery ($slug: String!) {
  datoCmsArticle (slug: { eq: $slug }) {
        id
        title
        slug
        }
      }
`;