Werner Digital

Technology

Gatsby

Modern serverless web applications using react

Gatsbyjs is a Jamstack implementation that can use AWS Amplify hosting directly. (see our Amplify page for more information on install and integration with AWS Amplify)

Note: You can also host Gatsby projects directly on AWS S3 and Cloudfront, described well here on Joshua Walsh's Blog. (ignore the title, I like my way better)

Running Gatsby with AWS Amplify is very inexpensive, and integrates well with public Git providers to provide a slick development pipeline and easy access to a wide variety of AWS services. The final application uses a CDN to scale and runs very efficiently, it is hard to beat on general lighthouse performance tests.

Content

Notable upgrades

Gatsby Official release notes

  • v5 migration notes
    • 5.2 removes svgTrace on images (license issues)
    • 5.1 fixes graphql issue
    • 5.0 couldn't install
  • v4 migration notes
    • 4.24 requires gatsby-cli update to 4.24
    • 4.23 slice
    • 4.22 deprecated gatsby-source-graphql
    • 4.21 markdown v2.0
    • 4.20 unusable in development mode
    • 4.19 gatsby head introduction, +todo:replaces react-helmet+
    • 4.16 lighthouse notices lost source-map (not compatible with react 18?)
    • 4.15 new graphql typegen features, and new non-blocking script tag
    • 4.13 pwa fixes for offline worker on react18
    • 4.11 +shopify plugin v7+
    • 4.9 typescript +gatsby-config, gatsby-node+ support
    • 4.8 typescript +gatsby-browser, gatsby-ssr+ support
    • requires node 14, begins support for node 18
  • v3

Typescript

ts gatsby doc

Additional info in the release notes for

  • 4.9 gatsby-config, gatsby-node
  • 4.8 gatsby-browser, gatsby-ssr

Gatsby Loves Shopify

plugin gatsby starter

gatsby-query-params

This is deprecated in gatsby v4, but gets bad when using npm9

The fix is to use the new hook use-query-params

  • npm install use-query-params gatsby-plugin-use-query-params

Gatsby v5

  • github gatsby 5 umbrella discussion

  • upgrade to node v18

    • upgrading to node v18 (from v14.16.0) and npm v9 (from v6.14.11)
    • this will require removal of node_modules and npm i for existing projects, along with new package-lock v2 generated.
  • not updated yet, this must be removed for now

    • gatsby-plugin-material-ui@4
  • upgrade to v5

    • npm i -g gatsby-cli@5
    • npm i gatsby@5 gatsby-plugin-image@3 gatsby-plugin-manifest@5 gatsby-plugin-mdx@5 gatsby-plugin-offline@6 gatsby-plugin-react-helmet@6 gatsby-plugin-sharp@5 gatsby-remark-images@7 gatsby-source-filesystem@5 gatsby-transformer-sharp@5
    • npm i babel-preset-gatsby@3
  • may also need

    • gatsby-plugin-sass@5

trailing slash change trailing slash is now default always (was legacy) the options are always, never, and ignore (dont change it)

gatsby cloud handles all settings, but amplify ???

gatsby-config.js

module.exports = {
  trailingSlash: `always`,
}

Deprecations

  • page props const { location, params, data, pageContext, serverData } = props

Effective changes in v6 will include:

Remove pageResources prop currently only available in browser context (it's an internal data structure) Remove * prop currently only available in server context (in favor of location prop) Remove path prop that currently differs in server and browser context (in favor of location prop) Remove uri prop in favor of location prop

The location prop will remain different in the browser and server context due to the router offering more properties in the browser context from window.location

Gatsby v4

  • v4 implementation gatsby-image deprecation

    • upgrade to v4
    • npm i gatsby@4 gatsby-plugin-image@2 gatsby-plugin-manifest@4 gatsby-plugin-material-ui@4 gatsby-plugin-mdx@4 gatsby-plugin-react-helmet@5 gatsby-plugin-sass@5 gatsby-plugin-sharp@4 gatsby-remark-images@6 gatsby-source-filesystem@4 gatsby-transformer-sharp@4
    • npm i babel-preset-gatsby@2
`Cannot find module 'gatsby-page-utils/apply-trailing-slash-option' from 'node_modules/gatsby-link/dist/index.js'`


 error TS2322: Type 'Mock<Promise<{ data: { listChannels: { nextToken: null; items: ({ atype: string; channelid: null; chkey: null; chlink: null; chtype: null; } | { atype: string; channelid: string; chkey: string; chlink: null; chtype: string; } | { ...; })[]; }; }; }>, []>' is not assignable to type '<T>(options: GraphQLOptions, additionalHeaders?: { [key: string]: string; } | undefined) => T extends GraphQLQuery<T> ? Promise<GraphQLResult<T>> : T extends GraphQLSubscription<...> ? Observable<...> : Promise<...> | Observable<...>'.
  Type 'Promise<{ data: { listChannels: { nextToken: null; items: ({ atype: string; channelid: null; chkey: null; chlink: null; chtype: null; } | { atype: string; channelid: string; chkey: string; chlink: null; chtype: string; } | { ...; })[]; }; }; }>' is not assignable to type 'T extends GraphQLQuery<T> ? Promise<GraphQLResult<T>> : T extends GraphQLSubscription<T> ? Observable<...> : Promise<...> | Observable<...>'.

116     API.graphql = MockListChannels;

Notes

install

npm i gatsby npm i --dev babel-preset-gatsby


gatsby-image

overview

Not quite sure when this happened, but the gatsby-image-plugin completely overlaps the use of gatsby-image, which is now deprecated.

gatsby-config

plugin requirements

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
  ],
}

use

import { StaticImage } from "gatsby-plugin-image"
import { GatsbyImage } from "gatsby-plugin-image"
import { getImage } from "gatsby-plugin-image"