chore(examples): Migrate to v5 (#36890)

gatsbyjs · Oct 26, 2022 · 878af17 · 878af17
1 parent c2a7e54
commit 878af17
Show file tree

Hide file tree

Showing 110 changed files with 692 additions and 662 deletions.
diff --git a/examples/client-only-paths/package.json b/examples/client-only-paths/package.json
@@ -8,8 +8,8 @@
     "gatsby": "next",
     "gatsby-plugin-netlify": "next",
     "gatsby-plugin-typography": "next",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-transition-group": "^2.9.0",
     "react-typography": "^0.16.19",
     "typography": "^0.16.19",

diff --git a/examples/creating-source-plugins/package.json b/examples/creating-source-plugins/package.json
@@ -11,4 +11,4 @@
     "source-plugin"
   ],
   "private": true
-}
+}
diff --git a/examples/data-fetching/package.json b/examples/data-fetching/package.json
@@ -10,8 +10,8 @@
     "gatsby-plugin-react-helmet": "next",
     "gatsby-source-graphql": "next",
     "prop-types": "^15.7.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^5.2.1"
   },
   "keywords": [
@@ -25,4 +25,4 @@
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   }
-}
+}
diff --git a/examples/ecommerce-tutorial-with-stripe/package.json b/examples/ecommerce-tutorial-with-stripe/package.json
@@ -16,8 +16,8 @@
     "gatsby-source-stripe": "^3.1.1",
     "gatsby-transformer-sharp": "next",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^5.2.1"
   },
   "keywords": [
@@ -41,4 +41,4 @@
   "bugs": {
     "url": "https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/issues"
   }
-}
+}
diff --git a/examples/ecommerce-tutorial-with-stripe/src/components/Products/Products.js b/examples/ecommerce-tutorial-with-stripe/src/components/Products/Products.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { graphql, StaticQuery } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
 import ProductCard from "./ProductCard"
 
 const containerStyles = {
@@ -11,50 +11,45 @@ const containerStyles = {
 }
 
 const Products = () => {
-  return (
-    <StaticQuery
-      query={graphql`
-        query ProductPrices {
-          prices: allStripePrice(
-            filter: { active: { eq: true } }
-            sort: { fields: [unit_amount] }
-          ) {
-            edges {
-              node {
-                id
-                active
-                currency
-                unit_amount
-                product {
-                  id
-                  name
-                }
-              }
+  const { prices } = useStaticQuery(graphql`
+    query ProductPrices {
+      prices: allStripePrice(
+        filter: { active: { eq: true } }
+        sort: { unit_amount: ASC }
+      ) {
+        edges {
+          node {
+            id
+            active
+            currency
+            unit_amount
+            product {
+              id
+              name
             }
           }
         }
-      `}
-      render={({ prices }) => {
-        // Group prices by product
-        const products = {}
-        for (const { node: price } of prices.edges) {
-          const product = price.product
-          if (!products[product.id]) {
-            products[product.id] = product
-            products[product.id].prices = []
-          }
-          products[product.id].prices.push(price)
-        }
+      }
+    }
+  `)
 
-        return (
-          <div style={containerStyles}>
-            {Object.keys(products).map(key => (
-              <ProductCard key={products[key].id} product={products[key]} />
-            ))}
-          </div>
-        )
-      }}
-    />
+  // Group prices by product
+  const products = {}
+  for (const { node: price } of prices.edges) {
+    const product = price.product
+    if (!products[product.id]) {
+      products[product.id] = product
+      products[product.id].prices = []
+    }
+    products[product.id].prices.push(price)
+  }
+
+  return (
+    <div style={containerStyles}>
+      {Object.keys(products).map(key => (
+        <ProductCard key={products[key].id} product={products[key]} />
+      ))}
+    </div>
   )
 }
 

diff --git a/examples/ecommerce-tutorial-with-stripe/src/components/image.js b/examples/ecommerce-tutorial-with-stripe/src/components/image.js
@@ -1,32 +1,31 @@
 import React from "react"
-import { StaticQuery, graphql } from "gatsby"
+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
- * `StaticQuery`, which allows us to load the image from directly within this
+ * `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.app/gatsby-image
- * - `StaticQuery`: https://gatsby.app/staticquery
  */
 
-const Image = () => (
-  <StaticQuery
-    query={graphql`
-      query {
-        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-          childImageSharp {
-            fluid(maxWidth: 300) {
-              ...GatsbyImageSharpFluid
-            }
+const Image = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 300) {
+            ...GatsbyImageSharpFluid
           }
         }
       }
-    `}
-    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
-  />
-)
+    }
+  `)
+
+  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
+}
+
 export default Image
diff --git a/examples/ecommerce-tutorial-with-stripe/src/components/layout.js b/examples/ecommerce-tutorial-with-stripe/src/components/layout.js
@@ -1,55 +1,54 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { StaticQuery, graphql } from "gatsby"
+import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
 import stripeLogo from "../images/powered_by_stripe.svg"
 
 import "@stripe/stripe-js" // https://github.com/stripe/stripe-js#import-as-a-side-effect
 
-const Layout = ({ children }) => (
-  <StaticQuery
-    query={graphql`
-      query SiteTitleQuery {
-        site {
-          siteMetadata {
-            title
-          }
+const Layout = ({ children }) => {
+  const data = useStaticQuery(graphql`
+    query SiteTitleQuery {
+      site {
+        siteMetadata {
+          title
         }
       }
-    `}
-    render={data => (
-      <>
-        <Header siteTitle={data.site.siteMetadata.title} />
-        <div
-          style={{
-            margin: `0 auto`,
-            maxWidth: 960,
-            padding: `0px 1.0875rem 1.45rem`,
-            paddingTop: 0,
-          }}
-        >
-          {children}
-          <footer>
-            <div>
-              Built by <a href="https://twitter.com/thorwebdev">Thor</a> with{" "}
-              <a href="https://www.gatsbyjs.com">Gatsby</a> | View{" "}
-              <a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/ecommerce-tutorial-with-stripe">
-                source
-              </a>
-            </div>
-            <div>
-              <a href="https://stripe.com">
-                <img src={stripeLogo} alt="Payments powered by Stripe" />
-              </a>
-            </div>
-          </footer>
-        </div>
-      </>
-    )}
-  />
-)
+    }
+  `)
+
+  return (
+    <>
+      <Header siteTitle={data.site.siteMetadata.title} />
+      <div
+        style={{
+          margin: `0 auto`,
+          maxWidth: 960,
+          padding: `0px 1.0875rem 1.45rem`,
+          paddingTop: 0,
+        }}
+      >
+        {children}
+        <footer>
+          <div>
+            Built by <a href="https://twitter.com/thorwebdev">Thor</a> with{" "}
+            <a href="https://www.gatsbyjs.com">Gatsby</a> | View{" "}
+            <a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/ecommerce-tutorial-with-stripe">
+              source
+            </a>
+          </div>
+          <div>
+            <a href="https://stripe.com">
+              <img src={stripeLogo} alt="Payments powered by Stripe" />
+            </a>
+          </div>
+        </footer>
+      </div>
+    </>
+  )
+}
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,