gatsby: `gatsby build` vs `gatsby develop` - conditional props behave unexpectedly

Summary

Query string / URL parameters for conditionally styling placeholder in gatsby-image component, works in development(gatsby develop but not always production(gatsby build)?

Relevant information

const Placeholder = ({data , location }) => {
  const params = qs.parse(location.search, { ignoreQueryPrefix: true });
  const base42_data = {
    galleryTall: data.galleryTall,
    galleryWide: data.galleryWide,
    galleryBig: data.galleryBig,
    galleryNormal: data.galleryNormal
  }

  const base42webp_data =  {
    galleryTall: data.galleryTall_base64webp,
    galleryWide: data.galleryWide_base64webp,
    galleryBig: data.galleryBig_base64webp,
    galleryNormal: data.galleryNormal_base64webp
  }

  return (
  <Layout>
      <Gallery
        data={params.base64webp ? base42webp_data : base42_data}
        blur={params.blur}
        bg={params.bg}
      />
  </Layout>
)}

Gallery component contains a list of GridCell components(styled gatsby-image components):

const Gallery = (props) => {
  const image_nodes = getAndSort(props.data)

  return (
  <>
      {image_nodes.map((image, i) =>
        <GridCell key={i}
          type={image.image_type}
          fluid={image.fluid}
          placeholderStyle={props.blur && {
            filter: `blur(8px)`,
            transform: `scale(1.04)`,
          }}
          backgroundColor={props.bg && "#333"}
        />
      )}
  </>
)}

Data contains two different qraphql queries on image data to filter based on querystring, main difference is the base64 format for placeholder thumbnails, this data exists in the published .json file that gatsby stores the query data in. The querystring parameter also works in production, but it’s effect does not work in production.

Likewise, the blur prop if true, does not apply/update the html style to have the placeholder blur style applied, style appears to be baked into the index.html file(iirc in prior projects, this is direct access to the file vs navigating to another page once the website has rehydrated into a react app.

The bg prop however, will affect if the backgroundColor div exists or not, even in production… That confuses me, adding/removing elements is ok in production, but not modifying an elements attributes(base64 image data or inline style)?? Is this expected, or should there not be this functional disparity between gatsby develop and build outputs?

Reproduction repo can be provided upon request, I’m not sure if this is my own fault/error for not handling it correctly, or if it is a bug.

Environment (if relevant)

Alpine Linux (Docker), Node 10

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-netlify`,
    `gatsby-transformer-sharp`,
    //`gatsby-plugin-no-sourcemaps`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/content`,
      },
    },
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-remote-images`,
      options: {
        filter: node => node.internal.type === `UnsplashImagesYaml`,
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        forceBase64Format: `jpeg`,
        useMozJpeg: false,
        stripMetadata: true,
      },
    },
  ],
}

package.json:

 "dependencies": {
    "gatsby": "^2.0.53",
    "gatsby-image": "git+https://github.com/polarathene/forked_packages#placeholder-gatsby-image",
    "styled-components": "^4.1.3",
    "styled-modern-normalize": "^0.2.0",
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby-plugin-styled-components": "^3.0.4",
    "gatsby-plugin-netlify": "^2.0.3",
    "gatsby-plugin-no-sourcemaps": "^2.0.1",
    "gatsby-plugin-sharp": "git+https://github.com/polarathene/forked_packages#placeholder-gatsby-plugin-sharp",
    "gatsby-source-filesystem": "^2.0.16",
    "gatsby-transformer-sharp": "git+https://github.com/polarathene/forked_packages#placeholder-gatsby-transformer-sharp",
    "gatsby-transformer-yaml": "^2.1.4",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "qs": "^6.6.0"
  },

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

Hey @wardpeet thank you for your feedback. Actually, I still get an issue and using @davidbasalla forceUpdate() didn’t work.

I want to set blue-style class to my main div when a user enters my website with ?blue=true param.

class Example extends Component {
  // Added this but it didn't work
  // componentDidMount() {
  //   this.forceUpdate()
  // }

  render() {
    const params = new URLSearchParams(this.props.location.search)
    const displayBlue = params.get('blue')

    return (
      <div className={displayBlue === 'true' ? 'blue-style' : ''}>
        Hello
      </div>
    )
  }
}

On first load class is always empty <div class> element is created. When I change page and hit the return button then the class is set correctly.

Do you have any idea on how to fix this?

Natansab on Sep 10, 2019

@Natansab you can do something like the following to get it working:

import React, { Component } from "react"
import '../assets/css/main.css'
class SecondPage extends Component {
  state = {
    isblue: false,
  }

  componentDidMount() {
    const { location } = this.props
    const { search } = location
    const siteParams = new URLSearchParams(search)
    if (siteParams.has("blue")) {
      this.setState({ isblue: true })
    }
  }
  render() {
    const { isblue } = this.state
    return (
      <div className={isblue ? "blue-style" : "normal-style"}>Hello</div>
    )
  }
}

export default SecondPage

The css is the following:

.blue-style{
    background-color: blue;
    color: white;
}
.normal-style{
    background-color: tomato;
    color: darkolivegreen;
}

Issuing gatsby dev and opening up http://localhost:8000/page2 i’m presented with:

natansab_1_dev

Opening a new browser window to localhost:8000/page2?blue=true it yelds the following:

natansab_2_dev

Clearing the cache with gatsby clean and issuing a production build and serving it with gatsby build && gatsby serve and opening up http://localhost:9000/page2 yelds the following:

natansab_3_build

And http://localhost:9000/page2?blue=true yelds the following:

natansab_4_build

I would avoid using the structure you’re using in the render method. As it could lead to this sort of rendering issues. More specifically in the ssr(server side rendering) “world” like in gatsby.

jonniebigodes on Sep 10, 2019