Hasty Treat - Gatsby Tips

Aug. 17, 2020

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

02:02 - React Helmet

• Make a re-usable SEO component that sets defaults. Spread children to override.

04:27 - When in doubt, stop the build and restart

• Gatsby clean
• Nuke node_modules + package-lock

05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser

06:44 - Run the build command locally to troubleshoot prod

• Dev mode isn’t SSG’d - people overlook this

08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser

• wrapPageElement and wrapRootElement

09:50 - Consider just adding the layout component manually to each page

• This will allow you to skip the layout if you need to have a page that isn’t typical

11:21 - Layout is not suitable for unmount animations

• Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components.

12:59 - use onCreatePage to pass context to the layout

 exports.onCreatePage = ({ page, actions }) => {   const { createPage } = actions;    if (page.path.match(/thumbnail/)) {     page.context.layout = 'thumbnail';     createPage(page);   } };  

14:03 - You don’t have to query for everything

• Hard-coding data in html/jsx is super valid

15:32 - Gatsby Parallel Runner

• For lots of images

Links

• Gridsom
• Google Cloud
• Cloudinary
• Sanity Image

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets