Update Shopify source plugin

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 aliases:
   node10: &node10
     docker:
-      - image: circleci/node:10
+      - image: circleci/node:12
   restore_node_modules: &restore_node_modules
     restore_cache:
       name: Restore node_modules cache

.env.development

@@ -3,4 +3,4 @@ AUTH0_CLIENTID=kp6gHVX1pySEYNpvktwciU5Mm1j0C52D
 AUTH0_CALLBACK=http://localhost:8000/callback/
 AUTH0_AUDIENCE=https://api.gatsbyjs.com/
 GATSBY_API=https://us-central1-gatsby-core.cloudfunctions.net/graphql
-SHOPIFY_ACCESS_TOKEN=9aa73c089d34741f36edbe4d7314373a
+SHOPIFY_ACCESS_TOKEN=9aa73c089d34741f36edbe4d7314373a

gatsby-config.js

@@ -16,13 +16,15 @@ module.exports = {
         component: require.resolve(`./src/components/Layout/`)
       }
     },
+    'gatsby-plugin-image',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     {
       resolve: 'gatsby-source-shopify',
       options: {
-        shopName: 'gatsby-swag',
-        accessToken: process.env.SHOPIFY_ACCESS_TOKEN
+        apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
+        password: process.env.SHOPIFY_ADMIN_PASSWORD,
+        storeUrl: process.env.SHOPIFY_SHOP_ADDRESS
       }
     },
     'gatsby-plugin-react-helmet',

package.json

@@ -23,16 +23,17 @@
     "apollo-boost": "^0.3.1",
     "auth0-js": "^9.10.2",
     "axios": "^0.18.0",
-    "gatsby": "^2.22.12",
+    "gatsby": "^3.1.2",
     "gatsby-image": "^2.0.41",
     "gatsby-plugin-emotion": "^4.0.6",
     "gatsby-plugin-google-analytics": "^2.0.20",
+    "gatsby-plugin-image": "^1.2.0-next.0",
     "gatsby-plugin-layout": "^1.0.15",
     "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sharp": "^2.6.9",
-    "gatsby-source-shopify": "^3.2.8",
+    "gatsby-source-shopify": "^5.0.0-rc.9",
     "gatsby-transformer-sharp": "^2.1.19",
     "react": "^16.8.6",
     "react-apollo": "^2.5.5",
@@ -69,4 +70,4 @@
       "git add"
     ]
   }
-}
+}

src/components/Cart/CartThumbnail.js

@@ -1,32 +1,35 @@
 import React from 'react';
 import { graphql, StaticQuery } from 'gatsby';
 import styled from '@emotion/styled';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import Image from 'gatsby-image';
 
 import { colors, radius } from '../../utils/styles';
 
-const CartThumbnailRoot = styled(Image)`
+const CartThumbnailRoot = styled(GatsbyImage)`
   border: 1px solid ${colors.brandLight};
   border-radius: ${radius.default}px;
   height: 36px;
   width: 36px;
 `;
 
-const CartThumbnail = ({
-  shopifyImages,
-  id: imageId,
-  fallback,
-  ...imageProps
-}) => {
-  const image = shopifyImages.find(({ id }) => id === imageId);
+const CartThumbnailRootFallback = styled(Image)`
+  border: 1px solid ${colors.brandLight};
+  border-radius: ${radius.default}px;
+  height: 36px;
+  width: 36px;
+`;
+
+const CartThumbnail = ({ shopifyImages, fallback, ...imageProps }) => {
+  const image = shopifyImages.find(({ src }) => src === fallback);
 
   if (image) {
-    imageProps.fluid = image.localFile.childImageSharp.fluid;
-  } else {
-    imageProps.src = fallback;
+    return (
+      <CartThumbnailRoot image={image.gatsbyImageData} alt={image.altText} />
+    );
   }
 
-  return <CartThumbnailRoot {...imageProps} />;
+  return <CartThumbnailRootFallback {...imageProps} src={fallback} />;
 };
 
 export default props => (
@@ -38,13 +41,9 @@ export default props => (
             node {
               images {
                 id
-                localFile {
-                  childImageSharp {
-                    fluid {
-                      ...GatsbyImageSharpFluid_withWebp
-                    }
-                  }
-                }
+                src
+                originalSrc
+                gatsbyImageData(width: 910, height: 910)
               }
             }
           }

src/components/ProductListing/ProductListing.js

@@ -30,25 +30,22 @@ const ProductListing = () => (
           edges {
             node {
               id
+              storefrontId
               handle
               title
               description
               productType
               variants {
+                storefrontId
                 shopifyId
                 title
                 price
                 availableForSale
               }
-              images {
+              featuredImage {
                 id
-                localFile {
-                  childImageSharp {
-                    fluid(maxWidth: 910, maxHeight: 910) {
-                      ...GatsbyImageSharpFluid_withWebp
-                    }
-                  }
-                }
+                altText
+                gatsbyImageData(width: 910, height: 910, placeholder: "blurred")
               }
             }
           }

src/components/ProductListing/ProductListingItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Link } from 'gatsby';
-import Image from 'gatsby-image';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
 import { MdShoppingCart, MdArrowForward } from 'react-icons/md';
 import UserContext from '../../context/UserContext';
@@ -32,19 +32,16 @@ const ProductListingItemLink = styled(Link)`
   overflow: hidden;
   text-decoration: none;
   transition: all ${TRANSITION_DURATION};
-
   @media (min-width: ${breakpoints.tablet}px) {
     margin-left: auto;
     margin-right: auto;
     max-width: 500px;
   }
-
   @media (min-width: ${breakpoints.desktop}px) {
     flex-basis: 300px;
     justify-content: center;
     margin: ${spacing.md * 1.25}px;
   }
-
   @media (hover: hover) {
     :hover {
       background: ${colors.brandLighter};
@@ -66,11 +63,9 @@ const Preview = styled(`div`)`
   margin-bottom: ${spacing.lg}px;
   overflow: hidden;
   position: relative;
-
   .gatsby-image-wrapper {
     transition: all ${TRANSITION_DURATION};
   }
-
   @media (hover: hover) {
     ${ProductListingItemLink}:hover & {
       .gatsby-image-wrapper {
@@ -91,20 +86,17 @@ const CodeEligibility = styled(`div`)`
   overflow: hidden;
   position: absolute;
   right: ${spacing.lg}px;
-
   span {
     align-items: center;
     display: flex;
     height: 30px;
     justify-content: center;
   }
-
   span:first-of-type {
     background: #999;
     flex-basis: 35%;
     font-size: 0.9rem;
   }
-
   span:last-child {
     background: ${props =>
       props.freeWith === 'HOLYBUCKETS' ? colors.lemon : colors.brand};
@@ -143,7 +135,6 @@ const Price = styled(`div`)`
   font-size: 1.4rem;
   font-weight: 500;
   letter-spacing: -0.02em;
-
   span {
     color: ${colors.textLight};
   }
@@ -159,13 +150,11 @@ const Incentive = styled('div')`
   margin-right: calc(-${spacing.lg}px - 40px);
   text-align: right;
   transition: all ${TRANSITION_DURATION};
-
   @media (hover: hover) {
     ${ProductListingItemLink}:hover & {
       transform: translateX(-40px);
     }
   }
-
   > span {
     svg {
       display: inline;
@@ -187,13 +176,11 @@ const CartIcon = styled(`span`)`
   transition: all ${TRANSITION_DURATION};
   vertical-align: middle;
   width: 40px;
-
   @media (hover: hover) {
     ${ProductListingItemLink}:hover & {
       margin-left: ${spacing.xs}px;
     }
   }
-
   svg {
     color: ${colors.accent};
     height: 22px;
@@ -223,12 +210,11 @@ const ProductListingItem = props => {
       handle,
       description,
       variants: [firstVariant],
-      images: [firstImage]
+      featuredImage
     }
   } = props;
 
   const { price } = firstVariant;
-  const fluid = firstImage?.localFile?.childImageSharp?.fluid;
 
   const freeWith =
     price >= 20 ? 'HOLYBUCKETS' : price >= 10 ? 'BUILDWITHGATSBY' : null;
@@ -239,24 +225,24 @@ const ProductListingItem = props => {
         return (
           <ProductListingItemLink to={`/product/${handle}`} aria-label={title}>
             <Item>
-              {fluid ? (
-                <Preview>
-                  <Image fluid={fluid} />
-                  {checkEligibility({
-                    freeWith,
-                    contributor
-                  }) && (
-                    <CodeEligibility freeWith={freeWith}>
-                      <span>free with </span>
-                      <span>
-                        Code Swag Level {freeWith === 'HOLYBUCKETS' ? '2' : '1'}
-                      </span>
-                    </CodeEligibility>
-                  )}
-                </Preview>
-              ) : (
-                'No preview image'
-              )}
+              <Preview>
+                <GatsbyImage
+                  image={featuredImage.gatsbyImageData}
+                  alt={featuredImage.altText}
+                  placeholder="blurred"
+                />
+                {checkEligibility({
+                  freeWith,
+                  contributor
+                }) && (
+                  <CodeEligibility freeWith={freeWith}>
+                    <span>free with </span>
+                    <span>
+                      Code Swag Level {freeWith === 'HOLYBUCKETS' ? '2' : '1'}
+                    </span>
+                  </CodeEligibility>
+                )}
+              </Preview>
               <Name>{title}</Name>
               <Description>
                 {cutDescriptionShort(

src/components/ProductPage/ProductForm.js

@@ -21,11 +21,9 @@ const Form = styled(`form`)`
   flex-wrap: wrap;
   justify-content: center;
   padding: ${spacing['2xl']}px ${spacing.md}px 0;
-
   @media (min-width: ${breakpoints.tablet}px) {
     padding: ${spacing['2xl']}px ${spacing.xl}px 0;
   }
-
   @media (min-width: ${breakpoints.desktop}px) {
     justify-content: flex-start;
   }
@@ -46,7 +44,6 @@ const ErrorSign = styled(`div`)`
   display: flex;
   flex-basis: 40px;
   justify-content: center;
-
   svg {
     height: 20px;
     width: 20px;
@@ -69,11 +66,9 @@ const QtyFieldset = styled(Fieldset)`
   flex-grow: 0;
   flex-shrink: 0;
   margin-right: ${spacing.md}px;
-
   ${Label} {
     text-align: center;
   }
-
   ${Input} {
     padding: ${spacing.sm}px ${spacing.sm}px;
     text-align: center;
@@ -82,7 +77,6 @@ const QtyFieldset = styled(Fieldset)`
 
 const SizeFieldset = styled(Fieldset)`
   flex-basis: calc(100% - ${spacing.md}px - 70px);
-
   ${Label} {
     justify-content: space-between;
   }
@@ -106,7 +100,9 @@ const AddToCartButton = styled(Submit)`
 class ProductForm extends Component {
   state = {
     variant:
-      this.props.variants.length === 1 ? this.props.variants[0].shopifyId : '',
+      this.props.variants.length === 1
+        ? this.props.variants[0].storefrontId
+        : '',
     quantity: 1,
     errors: []
   };
@@ -222,8 +218,8 @@ class ProductForm extends Component {
                   {variants.map(variant => (
                     <option
                       disabled={!variant.availableForSale}
-                      value={variant.shopifyId}
-                      key={variant.shopifyId}
+                      value={variant.storefrontId}
+                      key={variant.storefrontId}
                     >
                       {variant.title}
                     </option>