seo Question posted in
Some basic information to get you started with this can be found here.

Getting an "Exported queries are only executed for Page components." in Gatsby when trying to generate pages – SEO

This seems to be a relatively common problem. I am trying to generate blog post pages but am experiencing this error and the pages show a 404 on load. Which means that they are not being generated.

Here is my code for the gatsby.node.js file:

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,
        },
      })
    );
  };

And my code for the blog post PostPage.js file:

/* 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;
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up fixing this by doing a complete recomposition of my project, with an update to the latest version of Gatsby, this with a bare bones gatsby starter, plugin by plugin. It ended up being plugin conflict issue. I'm not sure which plugin exactly it was, but most likely it was one of these:

    gatsby-plugin-eslint, gatsby-plugin-offline, gatsby-plugin-root-import or possibly the prop-types NPM package.


  2. 0

    There are a few things that caught my attention and may fix your issue.

    • The usage of useStaticQuery in your gatsby-node.js. You don’t need to fetch postQuery data with the static query hook since you are using the hook outside a component.

    • The usage of where filter. According to GraphQL documentation, the way to filter data is by using filter filter. In addition, when filtering the filtered criteria are strings, so must be quoted.

    • When you pass a field via context API to your PostPage, you should avoid filter to all your gcms since your template has the information of that post, is not needed to redo the same previous query again (same than gatsby-node.js), it’s not optimal. I will let it there since I don’t know how is your data structured but should be refactored.

    Applying it to your code should look like this.

    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;
    Login or Signup to reply.
  3. 0

    I experienced this same issue after upgrading to the latest version of Gatsby.

    Similarly to Tapha’s answer, it was a plugin conflict for me. I had yet to upgrade the gatsby-source-strapi plugin. Upgrading that package to its latest available version solved the issue. Whatever your data source happens to be, I would check that it’s still playing nice with Gatsby.

    So, this warning/error message is very misleading, you can still use an exported query from templates, as detailed in the Gatsby documentation here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search