Gatsby: Custom build flags

[lachlanjc]

First, using Gatsby for Hack Club has been amazing. Already built 2 other sites with it and I just love it, so thank you! 💟

I have an idempotent build step (generating background images based on an input) that runs onCreateNode in my gatsby-node.js. However, I'd like to just run it occasionally, and keep the resulting files committed. I could write a separate script using fs to find the right directories and do this, but having it tied to the Gatsby build is radically easier.

Essentially, I'd like to be able to pass custom flags on build (gatsby build --generate-patterns or something). When I try that now, Gatsby refuses to run at all. Is there a good alternative/would you be interested in this feature?

[calcsam]

This is an interesting idea on multiple levels.

First, the idea of custom build flags that can be consumed by the gatsby-nodeAPIs is definitely an interesting one. The idea you're getting at here is that there are multiple reasons that a Gatsby build could be triggered -- for example, a repo could have multiple data sources each with webhooks, a build could be triggered by a cronjob running every day, etc, etc -- and it would be nice to encapsulate that information in some way.

Instead of allowing arbitrary flag, how we'd probably want to do this is allow a single optional flag, say params that could be passed an object. That would allow messages with as much complexity as desired.

Since that doesn't currently exist now, the workaround you'd probably want to use is set ENV variables before running gatsby build and then reference them using process.env.

[KyleAMathews]

@lachlanjc why not use GraphQL & gatsby-plugin-sharp/gatsby-transformer-sharp to do image transformations? Idempotence is built-in already for you :-)

Generally speaking, all data transformations should happen inside Gatsby's data-layer or webpack as it handles a lot of problems for you.

[KyleAMathews]

E.g. have you see https://image-processing.gatsbyjs.org/ and https://using-gatsby-image.gatsbyjs.org/?

[lachlanjc]

@calcsam Exactly. The single flag sounds good. And yep, came to the same conclusion with environment vars.

@KyleAMathews I'm not doing actual image processing, I'm generating SVG patterns (https://github.com/hackclub/site/blob/fde84b3c02de8dea1f1a283f111aa354dfe0ff95/gatsby-node.js#L7). But yes, that plugin is totally rad :)

"Inside Gatsby's data-layer"—what exactly does that mean?

[fk]

I'm generating SVG patterns

😍 !

@KyleAMathews @calcsam Everytime I see the https://hackclub.com/ landing page I imagine how https://www.gatsbyjs.org/community/ would look with s/th similar … 😉

[calcsam]

@lachlanjc -- wow, this is so beautiful!!

Gatsby's data layer is the plugin system -- eg, something like traced-svg happens inside Gatsby's "data layer" -- the plugin system sucks in images, applies transformations to them and then makes them available to be queried via GraphQL: https://using-gatsby-image.gatsbyjs.org/traced-svg/

[KyleAMathews]

@lachlanjc oh I see. So great news! What you want is already working! onCreateNode is only called when new nodes are created or old nodes are modified. Add a console.log to your onCreateNode function and try running gatsby build or develop twice. The second time, your console.log won't be called.

[lachlanjc]

@KyleAMathews Brilliant. Thank you. Gatsby = 💖