Модификация данных из запросов graphql в реагирующие компоненты с использованием gatsbyjs работает в разработке gatsby, но в сборке gatsby ломается

Question

Я использую Prismic в качестве CMS для сайта, созданного с помощью Gatsby. Мне нужно манипулировать данными, возвращаемыми запросами graphql, прежде чем отображать их в компоненте реагирования. Веб-сайт отлично работает в dev, но сборка не удалась, потому что используемые мной переменные не определены во время сборки.

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

import { graphql } from 'gatsby';

import Layout from "../components/layout"

export const data = graphql`
  query allData {
    allPrismicNews{
      edges {
        node {
          id
        }
      }
    }
  }
`;



class IndexPage extends Component {
    render() {
      return (
        <Layout>
            <p>{this.state.newsId ? this.state.newsId : null}</p>
        </Layout>
      );
    }
  componentDidMount() {
    if (typeof window === 'undefined') {
        return;
    }
    this.setState(() => ({ newsId: this.props.data.allPrismicNews.edges.map(article=>article.node.id).flat() }));    
    }
  }
  export default IndexPage;```

For this example, I expect to see the ids of the news output in the template, this works in development but not in production.

What am I doing wrong?

Answer 1

Что вы можете сделать, это установить начальное состояние на newsId, чтобы this.state.newsID никогда не было неопределенным:

class IndexPage extends Component {
  state = {
    newsId: null,
  }
  componentDidMount() {
    if (typeof window === "undefined") {
      return
    }
    this.setState({
      newsId: this.props.data.allPrismicNews.edges
        .map(article => article.node.id)
        .flat(),
    })
  }
  render() {
    return (
      <Layout>
        <p>{this.state.newsId ? this.state.newsId : null}</p>
      </Layout>
    )
  }
}