获取“仅对页面组件执行导出的查询”。在 Gatsby 中尝试生成页面时答案

【问题标题】：Getting an "Exported queries are only executed for Page components." in Gatsby when trying to generate pages获取“仅对页面组件执行导出的查询”。在 Gatsby 中尝试生成页面时
【发布时间】：2022-03-08 04:31:45
【问题描述】：

这似乎是一个比较常见的问题。我正在尝试生成博客文章页面，但遇到此错误并且页面在加载时显示 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;

【问题讨论】：

标签： javascript reactjs gatsby gatsby-plugin

【解决方案1】：

有几件事引起了我的注意，可能会解决您的问题。

useStaticQuery 在您的gatsby-node.js 中的用法。您无需使用静态查询挂钩获取postQuery 数据，因为您在组件外部使用挂钩。
where 过滤器的用法。根据GraphQL documentation，过滤数据的方法是使用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;

【讨论】：

【解决方案2】：

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

gatsby-plugin-eslint、gatsby-plugin-offline、gatsby-plugin-root-import 或者可能是 prop-types NPM 包。

【讨论】：

【解决方案3】：

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

与 Tapha 的回答类似，这对我来说是插件冲突。我还没有升级gatsby-source-strapi 插件。将该软件包升级到其最新可用版本解决了该问题。无论您的数据源是什么，我都会检查它是否仍然适用于 Gatsby。

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

【讨论】：