Gatsby shows page not found and then loads the content of the page on

Question

I'm not really sure where the problem is, I'm using amazon cloud, s3 bucket to host the website with cloudfront and WordPress as CMS

I thought Gatsby will create a static page but it looks like is injecting the content, the homepage looks ok but any other page it has this problem

I've been reading on forums, removing plugins but I haven't found a solution to this, you guys can check for example https://londonfilmpremieres.com/the-sandman/ on a slow 3g connection

This is my gatsby-config.js

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

console.log(
  `This WordPress Endpoint is used: '${process.env.WORDPRESS_API_URL}/graphql'`
)

module.exports = {
  /* Your site config here */

  siteMetadata: {
    title: `London Film Premieres `,
    description: `With The latest upcoming film premieres in london. Exclusive celebrities photos and videos on the red carpet, interviews trailers and more!`,
    siteUrl: `${process.env.SITE_URL}`,
    image: "london-film-premieres.png",

  },

  plugins: [
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: "xxxxxx",
        includeInDevelopment: false,
      },
    },
 
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: `${process.env.WORDPRESS_API_URL}/graphql`,
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }

            allWpPost{
              nodes{
                title
                excerpt
                date
                link
                slug
                acf_details{
                  simpleplot
                }
              }
            }         
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allWpPost } }) => {
              return allWpPost.nodes.map(node => {
                return Object.assign(
                  {},
                  {
                    title: node.title,
                    description: node.acf_details.simpleplot,
                    date: node.date,
                    url: `${process.env.SITE_URL}/${node.slug}/`,
                    guid: `${process.env.SITE_URL}/${node.slug}/`,
                  }
                )
              })
            },
            query: `
              {
                allWpPost {
                      nodes {
                        title
                        slug
                        acf_details {
                          simpleplot
                        }
                        date
                    }
                  }
              }
            `,
            output: "/rss.xml",
            title: "London film premieres - RSS Feed",
          },
        ],
      },
    },
      `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,

    `gatsby-plugin-zopfli`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

gatsby-node.js

const createHomePage = require("./create/createHomePage")
const createPages = require("./create/createPages")
const createPost = require("./create/createPost")

exports.createPages = async ({ actions, graphql, reporter }) => {
  await createHomePage({ actions, graphql, reporter })
  await createPages({ actions, graphql, reporter })
  await createPost({ actions, graphql, reporter })
}

createPages.js

module.exports = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions
  const { PostTemplateFragment } = require("../graphql/fragments.js")
  const pageTemplate = require.resolve("../src/templates/page-template.js")

  return graphql(
    `
      ${PostTemplateFragment}
      query MyQuery {
        allWpPage(filter: { isFrontPage: { eq: false } }) {
          nodes {
            id
            uri
            title
            content
          }
        }
        allWpPost {
          nodes {
            ...PostTemplateFragment
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    const pages = result.data.allWpPage.nodes
    const posts = result.data.allWpPost.nodes

    pages.forEach(node => {
      createPage({
        path: node.uri,
        component: pageTemplate,
        context: {
          id: node.id,
          page: node,
          posts,
          postSearchData: {
            allPosts: posts,
            options: {
              indexStrategy: "Prefix match",
              searchSanitizer: "Lower Case",
              TitleIndex: true,
              AuthorIndex: true,
              SearchByTerm: true,
            },
          },
        },
      })
      reporter.info(`page created:  ${node.uri}`)
    })
  })
}

my page-template.js it's just a normal file fetching data no other logic involve

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

export const query = graphql`
  query ($id: String) {
    wpPage(id: { eq: $id }) {
      title
      content
    }
  }
`

const PageTemplate = props => {
  const {
    pageContext: {
      postSearchData: { allPosts, options },
    },
  } = props

  const page = props.data.wpPage

  return (
    <Layout posts={allPosts} engine={options}>
      <h1 dangerouslySetInnerHTML={{ __html: page.title }} />
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </Layout>
  )
}

export default PageTemplate

I think I need to change something on gatsby-node but not sure exactly what could I do.

Answer 1

This may not help or it might. But it's worth looking at in the meantime probably.

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront/

Secondly,

checkout out the structure in the plugin's starter tutorial here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/docs/tutorials/creating-a-new-site-from-a-starter.md

it's maybe a better structure for you to model after? In my opinion, the flow of the components could be refactored.

Lastly,

I'm a little confused why you have a page-template.js for. You're creating pages with the post-template. isn't that enough? Like, after a user types in the search bar and gets a result to pop up under it, when they click that, wouldn't you just use the the to reference to the post-template page that you create by doing something like <Link to= ${uri} >?

Also,

You appear to being using Layout component in your templates, right? If so, you should use the gatsby-browser.js and import the layout there so that it doesn't have to recreate the layout at every page, it'll just change whatever the children are within it. I believe it's the wrappageelement that's useful here. You should include it in the gatsby-ssr.js file too.

https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapPageElement

https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/

AND... there is always the option of using a different CMS. I personally enjoy hygraph.com (formerly called GraphCMS). It's a lot easier to use in my opinion and sources really easily in and is well supported.

If you could ever provide a way to clone this repo that'd be helpful for me personally so I could run something locally and see if it produces the same results.

Sorry I can't be of more help at the moment.