Шаблон Gatsby для статей, защищенных аутентификацией Firebase - PullRequest
0 голосов
/ 14 сентября 2018

Я пытался создать небольшой сайт с использованием 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
          }
        }
  `;

Я знаю, что может быть трудно получить помощь по этому вопросу, поскольку это своего рода очень специфическая проблема, но любые идеи или указания, почему это не сработает с файлом шаблона, будут высоко оценены!

1 Ответ

0 голосов
/ 16 сентября 2018

Мне удалось заставить его работать, создав новый макет для этих статей и в основном защитив весь контент внутри этого макета. Я все еще чувствую, что должно быть более элегантное решение, поэтому любые идеи более чем приветствуются. А пока вот как я это заработал, если в будущем у кого-то возникнет эта проблема:

Новый компонент Layout:

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
        }
      }
`;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...