title: On page reload, my Gatsby.js footer component renders twice
body: <p>Thank you for taking the time to look at my problem. I would really appreciate any help.</p>
  
  <p>**Update:
  Ok, so I think I know what's causing the problem but I don't know why. Before, on my products/merch page I only had one item in my database. On the products/beans page I had multiple items. On the products/merch page where there was only one result from the query the footer did not display twice. As soon as I added another item into the merch category and products/merch had two products, on page reload it also began to duplicate the footer.</p>
  
  <p>Why would multiple queries have any effect on how a page renders? What could be some solutions to this? I'm going to try and pass the data in as props from the graphql to a allProducts component to see if that fixes the issue.
  **</p>
  
  <p>I'm using Gatsby.js and Strapi headless CMS for an ecommerce site I'm building. On a page which displays all the products in a specific category, if the page is reloaded, it renders the footer twice. This is confusing because when the page first renders it's fine but only on reload does it do it. If the website loads from that specific page, it also displays two footers. Once I navigate to another page and reload, the second footer goes away. This page giving me an issue has a GraphQL query. I have another page that also has a GraphQL query but it does not to do this. Something in this page is causing in issue in rendering. </p>
  
  <p>What I've tried:
  In gatsby-node.js, in the createPages export I had tried to create each page and pass a template and the context of "type" so that the GraphQL query could then filter for the data that the page needs. I thought that using createPage this way could cause a rendering issue. I've also tried removing the contents of the Footer component and directly placing them in layout.js. I've tried removing Layout component from the page and adding Header.js and Footer.js directly, still the same problem. I'm only experiencing this problem once i host it, not on the localhost. Is it an issue with Server Side Rendering? Here is a link to the site hosted on gatsby cloud, and if you click on any other page and refresh the second footer goes away but if you click back to this page and then refresh the second footer pops up again.</p>
  
  <p><a href="https://build-856af2e5-f049-46de-b6a5-9e11aa46a906.gtsb.io/products/beans/" rel="nofollow noreferrer">https://build-856af2e5-f049-46de-b6a5-9e11aa46a906.gtsb.io/products/beans/</a></p>
  
  <pre><code>  createPage({
      path: "/products/merch",
      component: path.resolve(`src/templates/allproducts.js`),
      context: {
        type: "merch",
      },
    })
  
    createPage({
      path: "/products/beans",
      component: path.resolve(`src/templates/allproducts.js`),
      context: {
        type: "beans",
      },
    })
  </code></pre>
  
  <p>So I then moved each page into a folder in the Gatsby pages folder. So Instead of using createPages to programmatically create them I made them traditionally by creating a products folder then adding a new page for each category. This did not resolve my issue by creating the pages manually instead of using createPages.</p>
  
  <p>It doesn't make sense to me why the footer would load twice and not the header or the main component in my layout.js, which looks like this:</p>
  
  <pre><code>import React from "react"
  import PropTypes from "prop-types"
  import { useStaticQuery, graphql } from "gatsby"
  import Footer from "./Footer"
  import Header from "./header"
  import "./layout.css"
  
  const Layout = ({ children }) =&gt; {
    const data = useStaticQuery(graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `)
  
    return (
      &lt;&gt;
        &lt;Header siteTitle={data.site.siteMetadata.title} /&gt;
  
        &lt;main&gt;{children}&lt;/main&gt;
        &lt;Footer /&gt;
      &lt;/&gt;
    )
  }
  
  Layout.propTypes = {
    children: PropTypes.node.isRequired,
  }
  
  export default Layout
  </code></pre>
  
  <p>Here is the Footer.js component:</p>
  
  <pre><code>import React from "react"
  import { Facebook, Instagram, Twitter } from "@material-ui/icons"
  import styled from "styled-components"
  
  const BottomNav = styled.footer`
    border-top: 1px solid black;
    position: sticky;
    height: 15vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Raleway;
    text-transform: uppercase;
  `
  
  const BottomNavContainer = styled.div`
    display: flex;
    justify-content: space-between;
    width: 200px;
    margin-bottom: 0.3rem;
  `
  
  const Footer = () =&gt; {
    return (
      &lt;BottomNav&gt;
        &lt;BottomNavContainer&gt;
          &lt;Facebook /&gt;
          &lt;Instagram /&gt;
          &lt;Twitter /&gt;
        &lt;/BottomNavContainer&gt;
  
        &lt;div&gt;
          © {new Date().getFullYear()},{` `} The Blank
        &lt;/div&gt;
      &lt;/BottomNav&gt;
    )
  }
  
  export default Footer
  </code></pre>
  
  <p>And here is the code for the pages that are duplicating the footer:</p>
  
  <pre><code>function Alert(props) {
    return &lt;MuiAlert elevation={6} variant="filled" {...props} /&gt;
  }
  
  const AllBeansPage = props =&gt; {
    const products = props.data.allStrapiProduct.nodes
    // const classes = useStyles()
    const [open, setOpen] = React.useState(false)
    const { addToCart } = useContext(CartContext)
    const handleClick = () =&gt; {
      setOpen(true)
    }
  
    const handleClose = (event, reason) =&gt; {
      if (reason === "clickaway") {
        return
      }
  
      setOpen(false)
    }
  
    return (
      &lt;Layout&gt;
        &lt;SEO
          title={
            products[0].type.charAt(0).toUpperCase() + products[0].type.slice(1)
          }
        /&gt;
        &lt;Fade in={true} timeout={{ enter: 2000, exit: 500 }}&gt;
          &lt;AllProductsContainer&gt;
            &lt;Container&gt;
              {products.map(product =&gt; (
                &lt;Slide
                  direction="left"
                  in={true}
                  mountOnEnter
                  unmountOnExit
                  timeout={{ enter: 1500, exit: 500 }}
                &gt;
                  &lt;ProductCard key={product.id}&gt;
                    &lt;Link
                      key={product.id}
                      style={{}}
                      to={`products/${product.type}/${product.slug}`}
                    &gt;
                      &lt;ImageContainer&gt;
                        {console.log(product.thumbnail.childImageSharp.fluid)}
                        &lt;Img
                          key={product.id}
                          fluid={product.thumbnail.childImageSharp.fluid}
                        /&gt;
                      &lt;/ImageContainer&gt;
                    &lt;/Link&gt;
                    &lt;ProductContent&gt;
                      &lt;Typography
                        gutterBottom
                        variant="h5"
                        component="h1"
                        style={{
                          fontFamily: "Caveat",
                          fontSize: "clamp(22px, 3vw, 28px)",
                        }}
                      &gt;
                        {product.name}
                      &lt;/Typography&gt;
                      &lt;Typography
                        variant="body2"
                        color="textSecondary"
                        style={{ fontSize: "clamp(12px, 1.5vw, 16px)" }}
                      &gt;
                        {product.description.slice(0, 35)}...
                      &lt;/Typography&gt;
  
                      &lt;Link
                        key={product.id}
                        style={{}}
                        to={`products/${product.type}/${product.slug}`}
                      &gt;
                        {" "}
                        &lt;Typography
                          variant="subtitle1"
                          color="primary"
                          style={{ fontSize: "clamp(14px, 1.5w, 18px)" }}
                        &gt;
                          Learn More
                        &lt;/Typography&gt;
                      &lt;/Link&gt;
                    &lt;/ProductContent&gt;
                    &lt;CardActionArea&gt;
                      &lt;CardActions
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                        }}
                      &gt;
                        &lt;Button
                          size="small"
                          color="primary"
                          onClick={() =&gt; {
                            addToCart(product, 1)
                            handleClick()
                          }}
                          style={{ fontSize: "clamp(12px, 1.5vw, 18px)" }}
                        &gt;
                          Add To Cart
                        &lt;/Button&gt;
                        &lt;Typography
                          variant="body1"
                          style={{ fontSize: "clamp(12px, 1.5vw, 18px)" }}
                        &gt;
                          {formatPrice(product.price_in_cents)}
                        &lt;/Typography&gt;
                      &lt;/CardActions&gt;
                    &lt;/CardActionArea&gt;
                  &lt;/ProductCard&gt;
                &lt;/Slide&gt;
              ))}
            &lt;/Container&gt;
          &lt;/AllProductsContainer&gt;
        &lt;/Fade&gt;
        &lt;Snackbar open={open} autoHideDuration={6000} onClose={handleClose}&gt;
          &lt;Alert onClose={handleClose} severity="success"&gt;
            Item successfully added to cart.
          &lt;/Alert&gt;
        &lt;/Snackbar&gt;
      &lt;/Layout&gt;
    )
  }
  
  export default AllBeansPage
  
  export const productQuery = graphql`
    query allBeanQuery {
      allStrapiProduct(filter: { type: { eq: "beans" } }) {
        nodes {
          strapiId
          id
          description
          created_at
          price_in_cents
          name
          slug
          type
          thumbnail {
            childImageSharp {
              fluid(quality: 100, maxWidth: 150, maxHeight: 150) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `
  </code></pre>