时间戳

首页 > 解决方案 > 在页面末尾使用命名导出时，Gatsy 页面查询无法正常工作。为什么？

graphql - 在页面末尾使用命名导出时，Gatsy 页面查询无法正常工作。为什么？

问题描述

我在 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 不执行？

标签： graphqlgatsbyes6-modules

解决方案

这个答案是对提到出口顺序的@hexangel616 的补充说明：

我相信 pageQuery 必须在 PageTemplate 之前导出，因为它被它使用。

您导出的 GraphQL 查询在gatsby 构建过程中具有特殊作用。从文档：

在高层次上，在整个引导和构建过程中发生的事情是：

  1. 节点对象来自您在 gatsby-config.js 中使用插件以及在 gatsby-node.js 文件中定义的任何源

  2. 从 Node 对象推断出架构

  3. 页面是基于您网站或已安装主题中的 JavaScript 组件创建的

  4. 提取并运行 GraphQL 查询以提供所有页面的数据

  5. 在公共目录中创建并捆绑静态文件

TLDR：为了让 gatsby 正确构建，您的所有 graphql 导出都必须井井有条。

推荐阅读