Adjust image processing example queries (#5158)

* adjust queries to not use id as way to select by filenames this will stop working in gatsby v2 * add link to code
gatsbyjs · Apr 27, 2018 · 04ea40b · 04ea40b
1 parent f3e3b44
commit 04ea40b
Showing 1 changed file with 102 additions and 72 deletions.
diff --git a/examples/image-processing/src/pages/index.js b/examples/image-processing/src/pages/index.js
@@ -6,17 +6,18 @@ import { rhythm } from "../utils/typography"
 class Index extends React.Component {
   render() {
     const images = this.props.data.allImageSharp.edges
-    const sizes = this.props.data.sizes.sizes
-    const resolutions = this.props.data.resolution.resolutions
-    const cropDefault = this.props.data.cropDefault.resize
-    const cropBottomLeft = this.props.data.cropBottomLeft.resize
-    const cropEntropy = this.props.data.cropEntropy.resize
-    const cropCenter = this.props.data.cropCenter.resize
-    const sizesDuotoneOriginal = this.props.data.sizesDuotoneOriginal.sizes
-    const sizesDuotone25 = this.props.data.sizesDuotone25.sizes
-    const sizesDuotone50 = this.props.data.sizesDuotone50.sizes
-    const sizesDuotone75 = this.props.data.sizesDuotone75.sizes
-    const sizesDuotone = this.props.data.sizesDuotone.sizes
+    const sizes = this.props.data.sizes.childImageSharp.sizes
+    const resolutions = this.props.data.resolution.childImageSharp.resolutions
+    const cropDefault = this.props.data.cropDefault.childImageSharp.resize
+    const cropBottomLeft = this.props.data.cropBottomLeft.childImageSharp.resize
+    const cropEntropy = this.props.data.cropEntropy.childImageSharp.resize
+    const cropCenter = this.props.data.cropCenter.childImageSharp.resize
+    const sizesDuotoneOriginal = this.props.data.sizesDuotoneOriginal
+      .childImageSharp.sizes
+    const sizesDuotone25 = this.props.data.sizesDuotone25.childImageSharp.sizes
+    const sizesDuotone50 = this.props.data.sizesDuotone50.childImageSharp.sizes
+    const sizesDuotone75 = this.props.data.sizesDuotone75.childImageSharp.sizes
+    const sizesDuotone = this.props.data.sizesDuotone.childImageSharp.sizes
 
     return (
       <div>
@@ -44,7 +45,12 @@ class Index extends React.Component {
               documentation
             </a>
             {` `}
-            or peep the code of this example site for more information.
+            or peep the{` `}
+            <a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/image-processing">
+              code
+            </a>
+            {` `}
+            of this example site for more information.
           </strong>
         </p>
 
@@ -359,91 +365,115 @@ export const pageQuery = graphql`
         }
       }
     }
-    sizes: imageSharp(id: { regex: "/fecolormatrix-kanye-west.jpg/" }) {
-      sizes(
-        duotone: { highlight: "#f00e2e", shadow: "#192550" }
-        traceSVG: {
-          color: "#f00e2e"
-          turnPolicy: TURNPOLICY_MINORITY
-          blackOnWhite: false
+    sizes: file(relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }) {
+      childImageSharp {
+        sizes(
+          duotone: { highlight: "#f00e2e", shadow: "#192550" }
+          traceSVG: {
+            color: "#f00e2e"
+            turnPolicy: TURNPOLICY_MINORITY
+            blackOnWhite: false
+          }
+          toFormat: PNG
+        ) {
+          ...GatsbyImageSharpSizes_tracedSVG
         }
-        toFormat: PNG
-      ) {
-        ...GatsbyImageSharpSizes_tracedSVG
       }
     }
-    sizesDuotone: imageSharp(id: { regex: "/fecolormatrix-kanye-west.jpg/" }) {
-      sizes(
-        maxWidth: 120
-        duotone: { highlight: "#0ec4f1", shadow: "#192550" }
-        traceSVG: { color: "#1E2151" }
-      ) {
-        ...GatsbyImageSharpSizes_tracedSVG
+    sizesDuotone: file(
+      relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    ) {
+      childImageSharp {
+        sizes(
+          maxWidth: 120
+          duotone: { highlight: "#0ec4f1", shadow: "#192550" }
+          traceSVG: { color: "#1E2151" }
+        ) {
+          ...GatsbyImageSharpSizes_tracedSVG
+        }
       }
     }
-    sizesDuotone50: imageSharp(
-      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    sizesDuotone50: file(
+      relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }
     ) {
-      sizes(
-        maxWidth: 120
-        duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 50 }
-        traceSVG: { color: "#A7DEF6" }
-      ) {
-        ...GatsbyImageSharpSizes_tracedSVG
+      childImageSharp {
+        sizes(
+          maxWidth: 120
+          duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 50 }
+          traceSVG: { color: "#A7DEF6" }
+        ) {
+          ...GatsbyImageSharpSizes_tracedSVG
+        }
       }
     }
-    sizesDuotone75: imageSharp(
-      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    sizesDuotone75: file(
+      relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }
     ) {
-      sizes(
-        maxWidth: 120
-        duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 75 }
-        traceSVG: { color: "#0ec4f1" }
-      ) {
-        ...GatsbyImageSharpSizes_tracedSVG
+      childImageSharp {
+        sizes(
+          maxWidth: 120
+          duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 75 }
+          traceSVG: { color: "#0ec4f1" }
+        ) {
+          ...GatsbyImageSharpSizes_tracedSVG
+        }
       }
     }
-    sizesDuotone25: imageSharp(
-      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    sizesDuotone25: file(
+      relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }
     ) {
-      sizes(
-        maxWidth: 120
-        traceSVG: { color: "#D1EFFB" }
-        duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 25 }
-      ) {
-        ...GatsbyImageSharpSizes_tracedSVG
+      childImageSharp {
+        sizes(
+          maxWidth: 120
+          traceSVG: { color: "#D1EFFB" }
+          duotone: { highlight: "#0ec4f1", shadow: "#192550", opacity: 25 }
+        ) {
+          ...GatsbyImageSharpSizes_tracedSVG
+        }
       }
     }
-    sizesDuotoneOriginal: imageSharp(
-      id: { regex: "/fecolormatrix-kanye-west.jpg/" }
+    sizesDuotoneOriginal: file(
+      relativePath: { regex: "/fecolormatrix-kanye-west.jpg/" }
     ) {
-      sizes(maxWidth: 120, traceSVG: { color: "#e7f7fe" }, toFormat: PNG) {
-        ...GatsbyImageSharpSizes_tracedSVG
+      childImageSharp {
+        sizes(maxWidth: 120, traceSVG: { color: "#e7f7fe" }, toFormat: PNG) {
+          ...GatsbyImageSharpSizes_tracedSVG
+        }
       }
     }
-    resolution: imageSharp(id: { regex: "/lol.jpg/" }) {
-      resolutions(grayscale: true, width: 500) {
-        ...GatsbyImageSharpResolutions_withWebp
+    resolution: file(relativePath: { regex: "/lol.jpg/" }) {
+      childImageSharp {
+        resolutions(grayscale: true, width: 500) {
+          ...GatsbyImageSharpResolutions_withWebp
+        }
       }
     }
-    cropDefault: imageSharp(id: { regex: "/gatsby.jpg/" }) {
-      resize(width: 180, height: 180) {
-        src
+    cropDefault: file(relativePath: { regex: "/gatsby.jpg/" }) {
+      childImageSharp {
+        resize(width: 180, height: 180) {
+          src
+        }
       }
     }
-    cropBottomLeft: imageSharp(id: { regex: "/nyancat/" }) {
-      resize(width: 180, height: 180, cropFocus: SOUTHWEST) {
-        src
+    cropBottomLeft: file(relativePath: { regex: "/nyancat/" }) {
+      childImageSharp {
+        resize(width: 180, height: 180, cropFocus: SOUTHWEST) {
+          src
+        }
       }
     }
-    cropEntropy: imageSharp(id: { regex: "/gatsby.jpg/" }) {
-      resize(width: 180, height: 180, cropFocus: ENTROPY) {
-        src
+    cropEntropy: file(relativePath: { regex: "/gatsby.jpg/" }) {
+      childImageSharp {
+        resize(width: 180, height: 180, cropFocus: ENTROPY) {
+          src
+        }
       }
     }
-    cropCenter: imageSharp(id: { regex: "/gatsby.jpg/" }) {
-      resize(width: 180, height: 180, cropFocus: CENTER) {
-        src
+    cropCenter: file(relativePath: { regex: "/gatsby.jpg/" }) {
+      childImageSharp {
+        resize(width: 180, height: 180, cropFocus: CENTER) {
+          src
+        }
       }
     }
   }