Merge pull request #59 from yurist38/migrate-to-gatsby-3

Migration to Gatsby v3

Author: jimmyn

example/package.json

@@ -5,29 +5,29 @@
   "version": "0.1.0",
   "author": "Dmitriy Nevzorov <dmitriy.nevzorov@microapps.com>",
   "dependencies": {
-    "gatsby": "^2.32.2",
-    "gatsby-image": "^2.11.0",
-    "gatsby-plugin-manifest": "^2.12.0",
-    "gatsby-plugin-offline": "^3.10.0",
-    "gatsby-plugin-react-helmet": "^3.10.0",
-    "gatsby-plugin-react-i18next": "^1.0.1",
-    "gatsby-plugin-sharp": "^2.14.0",
-    "gatsby-plugin-sitemap": "^2.12.0",
-    "gatsby-source-filesystem": "^2.11.0",
-    "gatsby-transformer-sharp": "^2.12.0",
-    "i18next": "^19.8.7",
+    "gatsby": "^3.1.0",
+    "gatsby-plugin-image": "^1.1.1",
+    "gatsby-plugin-manifest": "^3.1.0",
+    "gatsby-plugin-offline": "^4.1.0",
+    "gatsby-plugin-react-helmet": "^4.1.0",
+    "gatsby-plugin-react-i18next": "^1.0.4",
+    "gatsby-plugin-sharp": "^3.1.0",
+    "gatsby-plugin-sitemap": "^3.1.0",
+    "gatsby-source-filesystem": "^3.1.0",
+    "gatsby-transformer-sharp": "^3.1.0",
+    "i18next": "^19.9.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.8.5"
+    "react-i18next": "^11.8.10"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.13",
-    "@babel/core": "^7.12.13",
-    "aws-sdk": "^2.838.0",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "aws-sdk": "^2.865.0",
     "babel-plugin-i18next-extract": "^0.8.2",
-    "babel-preset-gatsby": "^0.12.0",
+    "babel-preset-gatsby": "^1.1.0",
     "mkdirp": "^1.0.4",
     "prettier": "2.2.1"
   },

example/src/components/image.js

@@ -1,32 +1,19 @@
 import React from 'react';
 import {useStaticQuery, graphql} from 'gatsby';
-import Img from 'gatsby-image';
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
+import {GatsbyImage} from 'gatsby-plugin-image';
 
 const Image = () => {
   const data = useStaticQuery(graphql`
     query {
       placeholderImage: file(relativePath: {eq: "gatsby-astronaut.png"}) {
         childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED, width: 300)
         }
       }
     }
   `);
 
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+  return <GatsbyImage image={data.placeholderImage.childImageSharp.gatsbyImageData} />;
 };
 
 export default Image;