Gatsy page query не работает при использовании именованного экспорта в конце страницы. Почему? - PullRequest
Новая
       1

Gatsy page query не работает при использовании именованного экспорта в конце страницы. Почему?

2 голосов
/ 10 октября 2019

У меня есть следующий шаблон страницы в Gatsby. 

import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';

const PageTemplate = props => {
  const { wordpressPage: currentPage } = props.data;
  return (
    <Layout>
      <h1 dangerouslySetInnerHTML={{ __html: currentPage.title }} />
      <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
    </Layout>
  );
};

export const pageQuery = graphql`
  query($id: String!) {
    wordpressPage(id: { eq: $id }) {
      title
      content
      date(formatString: "MMMM DD, YYYY")
    }
    site {
      id
      siteMetadata {
        title
      }
    }
  }
`;

export default PageTemplate;

, который работает как положено (взято из учебника), однако я предпочитаю делать весь мой экспорт в конце страницы примерно так:

import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';

const PageTemplate = props => {
  const { wordpressPage: currentPage } = props.data;
  return (
    <Layout>
      <h1 dangerouslySetInnerHTML={{ __html: currentPage.title }} />
      <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
    </Layout>
  );
};

const pageQuery = graphql`
  query($id: String!) {
    wordpressPage(id: { eq: $id }) {
      title
      content
      date(formatString: "MMMM DD, YYYY")
    }
    site {
      id
      siteMetadata {
        title
      }
    }
  }
`;

export default PageTemplate;
export { pageQuery }

Однако это не работает - props.data равно undefined. Это небольшая разница, но почему это может привести к тому, что pageQuery не будет выполнен?

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Этот ответ является дополнительным объяснением для @ hexangel616, который упомянул порядок экспорта:

Я считаю, что pageQuery необходимо экспортировать до PageTemplate, поскольку он используется им.

Ваши экспортированные запросы GraphQL играют особую роль в процессе сборки gatsby . Из документов:

На высоком уровне, то, что происходит в течение всего процесса начальной загрузки и сборки:

  1. Узловые объекты получены из любых источников, которые вы определилив gatsby-config.js с плагинами, а также в вашем файле gatsby-node.js

  2. Схема выводится из объектов Node

  3. Страницы создаются на основе компонентов JavaScript на вашем сайте или в установленных темах

  4. Извлекаются и запускаются запросы GraphQL для предоставления данных для всех страниц

  5. Статические файлы создаются и связываются в общедоступном каталоге

TLDR: для правильной сборки gatsby все ваши экспорты в graphql должны быть в порядке.

1 голос
/ 10 октября 2019

Я считаю, что pageQuery нужно экспортировать до PageTemplate, потому что он используется им: вот откуда он получает props.data, что объясняет, почему вы получаете undefined при экспорте после.

...