在尝试生成页面时获得盖茨比"Exported queries are only executed for Page components."

Question

这似乎是一个相对常见的问题。我正在尝试生成博客文章页面，但遇到了这个错误，页面在加载时显示404。这意味着它们没有被生成。

这是我的gatsby.node.js文件代码：

exports.createPages = async ({ graphql, useStaticQuery, actions: { createPage } }) => {
const postQuery = graphql(`
{
gcms {
posts(where: { stage: PUBLISHED }) {
id
slug
}
}
}
`);
const {
gcms: { posts },
} = useStaticQuery(postQuery);

posts.forEach(({ id, slug }) =>
createPage({
path: `/blog/${slug}`,
component: require.resolve(`./src/templates/PostPage.js`),
context: {
id: id,
slug: slug,
},
})
);
};

我的博客文章PostPage.js文件的代码：

/* eslint-disable react/prop-types */
import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/layout";
//import galaxy from "../images/galaxy.jpg";
import SEO from "../components/seo";
export const postPageQuery = graphql`
query PostPageQuery($id: ID!) {
gcms {
post(where: { id: $id }) {
title
slug
excerpt
postContentMarkdown
tags
author {
name
biography
}
seo {
title
description
keywords
}
}
}
}
`;
const PostPage = ({data: {post}}) => {
return (
<Layout>
<SEO
keywords={[
`ui`,
`ux`,
]}
title="Blog" />
{post.slug}
</Layout>
);
};
export default PostPage;

Answer 1

有一些事情引起了我的注意，可能会解决您的问题。

• useStaticQuery在gatsby-node.js中的用法。您不需要使用静态查询挂钩来获取postQuery数据，因为您在组件外部使用挂钩。

• where滤波器的使用。根据GraphQL文档，过滤数据的方法是使用filter过滤器。此外，在筛选时，筛选条件是字符串，因此必须引用。

• 当您通过上下文API将字段传递给PostPage时，您应该避免筛选到所有gcms，因为您的模板具有该帖子的信息，不需要再次重做相同的前一个查询(与gatsby-node.js相同(，这不是最佳的。我会让它在那里，因为我不知道你的数据是如何结构化的，但应该重构。

将它应用到代码中应该是这样的。

gatsby-node.js:

exports.createPages = async ({ graphql, useStaticQuery, actions: { createPage } }) => {
const postQuery = graphql(`
{
gcms {
posts(filter: { stage: "PUBLISHED" }) {
id
slug
}
}
}
`);
let {posts}= postQuery.gcms;

posts.forEach(({ id, slug }) =>
createPage({
path: `/blog/${slug}`,
component: require.resolve(`./src/templates/PostPage.js`),
context: {
id: id,
slug: slug,
},
})
);
};

PostPage.js:

/* eslint-disable react/prop-types */
import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/layout";
//import galaxy from "../images/galaxy.jpg";
import SEO from "../components/seo";
export const postPageQuery = graphql`
query PostPageQuery($id: ID!) {
gcms {
post(filter: { id: $id }) {
title
slug
excerpt
postContentMarkdown
tags
author {
name
biography
}
seo {
title
description
keywords
}
}
}
}
`;
const PostPage = ({data: {post}}) => {
return (
<Layout>
<SEO
keywords={[
`ui`,
`ux`,
]}
title="Blog" />
{post.slug}
</Layout>
);
};
export default PostPage;

Answer 2

我最终通过对我的项目进行完整的重组来解决这个问题，并更新到Gatsby的最新版本，这是一个简单的Gatsby入门程序，一个接一个插件。它最终成为插件冲突问题。我不确定它到底是哪个插件，但很可能是其中之一：

gatsby-plugin-eslint、gatsby-plugin-offline、gatsby-plugin-root-import或可能的prop-typesNPM封装。

Answer 3

在升级到最新版本的Gatsby后，我遇到了同样的问题。

与Tapha的回答类似，这对我来说是一个插件冲突。我还没有升级gatsby-source-strapi插件。将该程序包升级到最新可用版本解决了此问题。无论你的数据来源是什么，我都会检查一下盖茨比的表现是否良好。

因此，此警告/错误消息非常误导，您仍然可以使用从模板导出的查询，如Gatsby文档中所述。