Add fragments for gatsby-source-contentful + update using-contentful

examples/using-contentful/src/pages/image-api.js

@@ -1,4 +1,5 @@
 import React from "react"
+import Img from "gatsby-image"
 import { rhythm } from "../utils/typography"
 
 export default props => {
@@ -43,7 +44,6 @@ export default props => {
           src
           width
           height
-          aspectRatio
         }
       }
     }
@@ -68,12 +68,9 @@ export default props => {
         You should prefer this operator over <code>resize</code>.
       </p>
       {assets.map(({ node: { title, resolutions } }) => (
-        <img
+        <Img
           alt={title}
-          src={resolutions.src}
-          srcSet={resolutions.srcSet}
-          width={resolutions.width}
-          height={resolutions.height}
+          resolutions={resolutions}
           style={{
             marginRight: rhythm(1 / 2),
             marginBottom: rhythm(1 / 2),
@@ -123,12 +120,9 @@ export default props => {
         </a>
       </p>
       {assets.map(({ node: { title, resizing } }) => (
-        <img
+        <Img
           alt={title}
-          src={resizing.src}
-          srcSet={resizing.srcSet}
-          width={resizing.width}
-          height={resizing.height}
+          resolutions={resizing}
           style={{
             marginRight: rhythm(1 / 2),
             marginBottom: rhythm(1 / 2),
@@ -172,11 +166,9 @@ export default props => {
         reaches.
       </p>
       {assets.map(({ node: { title, sizes } }) => (
-        <img
+        <Img
           alt={title}
-          src={sizes.src}
-          srcSet={sizes.srcSet}
-          sizes={sizes.sizes}
+          sizes={sizes}
           style={{
             marginRight: rhythm(1 / 2),
             marginBottom: rhythm(1 / 2),
@@ -219,24 +211,15 @@ export const pageQuery = graphql`
             src
             width
             height
-            aspectRatio
           }
           resolutions(width: 100) {
-            width
-            height
-            src
-            srcSet
+            ...GatsbyContentfulResolutions_noBase64
           }
           resizing: resolutions(width: 100, height: 100) {
-            width
-            height
-            src
-            srcSet
+            ...GatsbyContentfulResolutions_noBase64
           }
           sizes(maxWidth: 613) {
-            sizes
-            src
-            srcSet
+            ...GatsbyContentfulSizes_noBase64
           }
         }
       }

examples/using-contentful/src/pages/index.js

@@ -90,11 +90,7 @@ export const pageQuery = graphql`
           }
           image {
             resolutions(width: 75) {
-              base64
-              src
-              srcSet
-              height
-              width
+              ...GatsbyContentfulResolutions
             }
           }
         }
@@ -109,11 +105,7 @@ export const pageQuery = graphql`
           }
           image {
             resolutions(width: 75) {
-              base64
-              src
-              srcSet
-              height
-              width
+              ...GatsbyContentfulResolutions
             }
           }
         }

packages/gatsby-image/src/index.js

@@ -1,9 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-// TODO support adding node_modules/gatsby-image as place to scan for graphql fragments to gatsby-plugin-sharp and gatsby-source-contentful
-// TODO add fragments here with and without base64 in fragments file so not included in pages.
-
 const convertProps = props => {
   let convertedProps = { ...props }
   if (convertedProps.responsiveResolution) {
@@ -219,6 +216,7 @@ class Image extends React.Component {
           style={{
             position: `relative`,
             overflow: `hidden`,
+            display: `inline-block`,
             zIndex: 1,
             width: image.width,
             height: image.height,

packages/gatsby-source-contentful/.gitignore

@@ -1,4 +1,5 @@
 /gatsby-node.js
+/fragments.js
 /extend-node-type.js
 /normalize.js
 /fetch.js

packages/gatsby-source-contentful/.npmignore

@@ -27,7 +27,7 @@ build/Release
 node_modules
 *.un~
 yarn.lock
-src
+src/__tests__
 flow-typed
 coverage
 decls

packages/gatsby-source-contentful/package.json

@@ -21,6 +21,7 @@
     "bluebird": "^3.5.0",
     "contentful": "^4.3.0",
     "deep-map": "^1.5.0",
+    "fs-extra": "^4.0.2",
     "json-stringify-safe": "^5.0.1",
     "lodash": "^4.17.4",
     "qs": "^6.4.0"

packages/gatsby-source-contentful/src/extend-node-type.js

@@ -342,7 +342,7 @@ exports.extendNodeType = ({ type }) => {
   return {
     resolutions: {
       type: new GraphQLObjectType({
-        name: `ContentfulResponsiveResolution`,
+        name: `ContentfulResolutions`,
         fields: {
           base64: { type: GraphQLString },
           aspectRatio: { type: GraphQLFloat },
@@ -382,7 +382,7 @@ exports.extendNodeType = ({ type }) => {
     },
     sizes: {
       type: new GraphQLObjectType({
-        name: `ContentfulResponsiveSizes`,
+        name: `ContentfulSizes`,
         fields: {
           base64: { type: GraphQLString },
           aspectRatio: { type: GraphQLFloat },
@@ -423,8 +423,7 @@ exports.extendNodeType = ({ type }) => {
       },
     },
     responsiveResolution: {
-      deprecationReason:
-        `We dropped the "responsive" part of the name to make it shorter https://github.com/gatsbyjs/gatsby/pull/2320/`,
+      deprecationReason: `We dropped the "responsive" part of the name to make it shorter https://github.com/gatsbyjs/gatsby/pull/2320/`,
       type: new GraphQLObjectType({
         name: `ContentfulResponsiveResolution`,
         fields: {
@@ -465,8 +464,7 @@ exports.extendNodeType = ({ type }) => {
       },
     },
     responsiveSizes: {
-      deprecationReason:
-        `We dropped the "responsive" part of the name to make it shorter https://github.com/gatsbyjs/gatsby/pull/2320/`,
+      deprecationReason: `We dropped the "responsive" part of the name to make it shorter https://github.com/gatsbyjs/gatsby/pull/2320/`,
       type: new GraphQLObjectType({
         name: `ContentfulResponsiveSizes`,
         fields: {

packages/gatsby-source-contentful/src/fragments.js

@@ -0,0 +1,38 @@
+/* eslint-disable */
+export const contentfulAssetResolutions = graphql`
+  fragment GatsbyContentfulResolutions on ContentfulResolutions {
+    base64
+    width
+    height
+    src
+    srcSet
+  }
+`
+
+export const contentfulAssetResolutionsNoBase64 = graphql`
+  fragment GatsbyContentfulResolutions_noBase64 on ContentfulResolutions {
+    width
+    height
+    src
+    srcSet
+  }
+`
+
+export const contentfulAssetSizes = graphql`
+  fragment GatsbyContentfulSizes on ContentfulSizes {
+    base64
+    aspectRatio
+    src
+    srcSet
+    sizes
+  }
+`
+
+export const contentfulAssetSizesNoBase64 = graphql`
+  fragment GatsbyContentfulSizes_noBase64 on ContentfulSizes {
+    aspectRatio
+    src
+    srcSet
+    sizes
+  }
+`

packages/gatsby-source-contentful/src/gatsby-node.js

@@ -1,4 +1,5 @@
 const _ = require(`lodash`)
+const fs = require(`fs-extra`)
 
 const normalize = require(`./normalize`)
 const fetchData = require(`./fetch`)
@@ -166,3 +167,39 @@ exports.sourceNodes = async (
 
   return
 }
+
+// Check if there are any ContentfulAsset nodes and if gatsby-image is installed. If so,
+// add fragments for ContentfulAsset and gatsby-image. The fragment will cause an error
+// if there's not ContentfulAsset nodes and without gatsby-image, the fragment is useless.
+exports.onPreExtractQueries = async ({
+  store,
+  getNodes,
+  boundActionCreators,
+}) => {
+  const program = store.getState().program
+
+  const nodes = getNodes()
+
+  if (!nodes.some(n => n.internal.type === `ContentfulAsset`)) {
+    return
+  }
+
+  let gatsbyImageDoesNotExist = true
+  try {
+    require.resolve(`gatsby-image`)
+    gatsbyImageDoesNotExist = false
+  } catch (e) {
+    // Ignore
+  }
+
+  if (gatsbyImageDoesNotExist) {
+    return
+  }
+
+  // We have both gatsby-image installed as well as ImageSharp nodes so let's
+  // add our fragments to .cache/fragments.
+  await fs.copy(
+    require.resolve(`gatsby-source-contentful/src/fragments.js`),
+    `${program.directory}/.cache/fragments/contentful-asset-fragments.js`
+  )
+}