Gatsby

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

• StaticQuery replaced with useStaticQuery hook

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;