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

受Firebase Auth保护的文章的Gatsby模板

1 个答案: