Unknown field childImageSharp on type File

[corygibbons]

Not sure if there's a bug or if I'm missing something but I'm having trouble interacting with images.

I've tested some image transforms when using gatsby-source-wordpress and everything works as excepted so hopefully I've just missed something here.

Error I get is:

GraphQL: Error Unknown field `childImageSharp` on type `File`

Relevant files:

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'test',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-shopify',
      options: {
        shopName: 'shopName',
        accessToken: 'accessToken',
        verbose: true,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
  ],
}

Also have gatsby-image and gatsby-source-filesystem as dependencies.

// query in templates/product.js

query Product($handle: String!) {
  shopifyProduct(handle: { eq: $handle }) {
    title
    handle
    description
    images {
      localFile {
        childImageSharp {
          resolutions(width: 500, height: 300) {
            ...GatsbyImageSharpResolutions_withWebp
          }
        }
      }
    }
  }
}

Any idea what's causing this error?

[angeloashmore]

Hi @corygibbons, so sorry I missed this issue. Nothing here looks out of the ordinary. Are you able to see shopifyProduct.images.localFile.childImageSharp in GraphiQL (http://localhost:8000/___graphql)?

[wedelgaard]

I'm experiencing the same issue. Im able to see childImageSharp and the whole schema in GraphQL, but querying for data it returns childImageSharp: null. I'm not using Gatsby v2

[jfrolich]

Using gatsby 2 here, but childImageSharp is not available on File here.

[witbybit]

I am using Gatsby v2 and I am seeing the same issue as well. I always get childImageSharp: null

[witbybit]

I figured out the issue. The originalSrc url coming back from Shopify has "?v=123123" at the end which is why gatsby isn't able to figure out that it's an image. I just removed this suffix and it works for me now. Not sure why shopify is adding that to the end of the url. See gatsbyjs/gatsby#6853

[witbybit]

I published a package https://www.npmjs.com/package/gatsby-source-shopify2 to fix the above issues. Not sure if changes are being taken in for this project given that a pull request has been pending for a while.

[wedelgaard]

@nikhilag great! I'll try it out

[angeloashmore]

Hey everyone, sorry for the delay in response. I've been falling behind on GitHub issues/PRs due to a very busy work schedule.

I'll publish an update soon with Gatsby v2 compat per the solutions noted above.

[PHironaka]

hey @nikhilag thanks for creating a v2 of this plugin! I have a question though. I tried displaying images for my Shopify products and the screen is just blank. The following query works for me in GraphQL though:

{
  allShopifyProduct {
    edges {
      node {
        images {
          localFile {
            id
            childImageSharp {
              id
              fluid {
                base64
                tracedSVG
              
              }
            }
          }
        }
      }
    }
  }
}

Results:

{
  "data": {
    "allShopifyProduct": {
      "edges": [
        {
          "node": {
            "images": []
          }
        },
        {
          "node": {
            "images": [
              {
                "localFile": {
                  "id": "/Users/peterhironaka/templates/tutorial-part-four/.cache/gatsby-source-filesystem/5f3054c0bb26f1c49c7eff703003f5d3.jpg absPath of file",
                  "childImageSharp": {
                    "id": "61e8edf2-0cba-524a-887a-281f5ff12638",
                    "fluid": {
                      "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQADAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB7sXCbQrAUD//xAAYEAEAAwEAAAAAAAAAAAAAAAABAAIQEf/aAAgBAQABBQJeQuOMKhvM/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAFhAAAwAAAAAAAAAAAAAAAAAAACEw/9oACAEBAAY/AhQ//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAEFGB/9oACAEBAAE/IZl8zsV+cIkchTiXRz//2gAMAwEAAgADAAAAEKfHAP/EABcRAQADAAAAAAAAAAAAAAAAABEBICH/2gAIAQMBAT8Qlcp//8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxAf/8QAGhABAAIDAQAAAAAAAAAAAAAAAQARECExcf/aAAgBAQABPxAHNAtZd4qXdINkdhY6ZV2nk5A6npj/2Q==",
                      "tracedSVG": "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400' version='1'%3e%3cpath d='M164 115c-2 1-5 3-5 5-2 1-2 1-1-3v-4h-12c-13 0-13 0-13 6 0 3 0 4 2 4h4l-1 1-1 2-2 9-1 6h5c6 0 7-1 9-12 2-6 2-7 5-7s3 0 2 7c0 6 0 7 3 10 6 5 17 3 23-5l2-3-1 3c-1 5-1 6 3 7 5 0 7-1 7-4 1-4 2-4 4 0 2 3 3 4 9 4 4 0 5-2 2-8l-3-6 2-3 5-6c3-4 2-5-3-6-4 0-5 0-6 2-2 3-3 3-3 0-1-2-2-2-6-2-5 0-5 0-6 3l-1 8-2 5v-5c0-4-4-11-7-10h-2c-1-2-7-1-11 2m53-2l-3 1 3 9c2 6 2 7 1 11-2 6-1 7 5 7h5l2-6c1-3 3-8 6-11l6-10-5-1c-4 0-5 0-7 4l-2 3-2-3-1-4h-8m28 0c-3 0-8 22-5 26l3 2 2 1-2 1c-3 1-6 6-5 9 0 2 2 4 4 6 4 4 2 5-3 2-2-1-3-2-3-4 0-9-13-16-23-12h-4l-5-1c-3 0-3 1-5 5l-1 5-2-5c-1-5-1-5-5-5-5 0-7 1-7 3l-5 22-1-12c0-14 0-13-9-13-4 0-5 1-8 7l-6 8-2 3c0 3-3 10-3 8l3-12c4-12 4-13 1-13-5-2-9 0-10 5l-2 4v-3c2-6 1-6-4-6h-5l-1 5c-1 3-2 5-4 5-2 1-2 1-2 4v12c0 2 0 3 5 3h5l1-4 2-4v8h4l5-1h5c5 1 7 0 8-2 0-3 7-3 7 0 0 2 1 2 10 2h10v-4c2-4 3-4 3 1l1 3h10l3-9 3-13 2-4v8l-2 12-1 5h11c2 3 14-2 14-5l1-1 1 2c0 2 6 5 11 6 11 1 17-10 8-17-4-4-4-5 1-3 4 2 5 2 5-3 0-4-3-7-8-7l-3-1 8-1h7v-3c-1-2 0-7 1-13 3-11 3-12-3-12l-3 1-3 8c-2 9-3 11-4 11s-1-3 1-11l2-8c0-1-6-2-9-1m-107 67c-1 4-1 4-6 4-4 0-5 0-5 2l4 1c5 0 5 0 2 4-4 5-3 7 4 6 4 0 5 0 5 2 1 3 0 7-2 7s-1 4 2 5c3 0 4-3 4-9v-5h5c4 0 5 0 5-2l-6-1c-4 0-4-1-4-3s0-2-2-2-3 0-2 3c0 2 0 2-3 2-4 0-4-1 0-4 2-3 3-3 11-3 7 0 8 0 8-2s-1-2-8-2-7 0-7-2c1-1 0-2-1-3-2-1-2-1-4 2m33-2l-4 6-4 5 2 1 2 2v1c1 1 3 2 10 1l9 1-10 1c-9 0-10 0-10 2l-1 4c-2 5-1 10 2 7l1-8v-1c0-2 9-1 9 0l1 4c2 2 5 0 3-3-1-2-1-2 2-2l3 1 1 2 1 2h-1c-2-1-3-1-3 1-1 2-2 2-5 2-4 0-4-1-4-3-1-5-4-5-4 0 0 4 2 7 5 7l5-1 5-2 4-2c2 3 3-1 1-3l-1-10v-7h-3c-3 0-4-1-1-2 3-2 1-3-5-3-4 0-6 0-5-1 0-1-2-3-4-3l-1 1m45 0l-11 1c-5 0-6 0-6 2 0 1 2 2 6 2 7 1 8 3 1 3-4 0-5 0-5 2s1 2 5 2c7 1 6 3-2 3-6 0-6 1-6 2 0 2 0 2 3 2 7 0 10 1 10 5 0 2 0 3-2 3s-2 1-1 3l4 1c2 0 3-1 3-6l1-5h6c5 0 6-1 6-3s0-2-6-2l-7-1c0-2 1-2 5-2 6-1 6-3 0-4-4 0-5 0-5-2s1-2 5-2 5 0 5-2l-1-2h-8m23 3l-5 5c-2 3-3 5 0 6l1 7c0 8 1 10 7 10l6-1c2-1 1-5-1-5-2-1-2-1-2 1l-2 1c-3 0-3 0-3-6s0-7 2-7l2 2-2 1-1 3c0 2 1 2 5 1 1 0 2-1 2-6 0-8 2-9 2-1s1 10 3 10l1-9c0-10 0-11-3-9-2 1-7-2-7-5 0-2-4-2-5 2m18 11l-1 13c-2 0-3 3-1 4h3l3-1v-15c0-13 0-14-2-14s-2 1-2 13' fill='lightgray' fill-rule='evenodd'/%3e%3c/svg%3e"
                    }
                  }
                }
              },

And here's the index.js I'm trying to display the images on:

export default ({ data }) => {
  console.log(data)
  return (
    <Layout>
      <div>
        
        {data.allShopifyProduct.edges.map(({ node }) => (

          <div key={node.id}>

<Img fluid={node.images.localFile.childImageSharp.fluid.tracedSVG} />
  </div>
            
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allShopifyProduct {
    edges {
      node {
        id
        title
        handle
        descriptionHtml
        productType
        vendor
        images {
          localFile {
            id
            childImageSharp {
              fluid {
		tracedSVG
              }
            }
          }
        }
        
      }
    }
  }
  }
`

Title, description, handle etc. are all showing up on the page, but when I try to show images I just get a blank screen. Any help would be appreciated!

[witbybit]

You should use fragments here as mentioned in https://www.gatsbyjs.org/packages/gatsby-image/#two-types-of-responsive-images

[PHironaka]

@nikhilag I just retested my GraphQL query by using one of the gatsby-transformer-sharp fragments - GatsbyImageSharpFluid

Still not working for me. Here is my current index.js page:

import React from "react"
import { graphql } from "gatsby"
import { css } from "react-emotion"
import { rhythm } from "../utils/typography"
import Layout from "../components/layout"
import Img from 'gatsby-image';

export default ({ data }) => {
  console.log(data)
  return (
    <Layout>
      <div>
      
        <h4>{data.allShopifyProduct.title} </h4>
        {data.allShopifyProduct.edges.map(({ node }) => (

          <div key={node.id}>

<Img fluid={node.images.childImageSharp.fluid} />

            <h3
              className={css`
                margin-bottom: ${rhythm(1 / 4)};
              `}
            >
              {node.title}
              
            </h3>

            <p>USD ${node.variants[0].price} </p>
            <p> {node.vendor} </p>

          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allShopifyProduct {
    edges {
      node {
        id
        title
        handle
        descriptionHtml
        productType
        vendor
        variants {
        	price
        }
        images {
          localFile {
            childImageSharp {
              fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid
               }
             }
          }
        }
        
      }
    }
  }
  }
`

[witbybit]

You need to access index of images which is an array and also you are missing localFile property. So something like the following should work:-
<Img fluid={node.images[0].localFile.childImageSharp.fluid}/>

[PHironaka]

@nikhilag unfortunately it is still not working

[PHironaka]

@nikhilag I'm able to query all other data (title, content, price, etc) except for product images.

[witbybit]

I think it's some minor issue with the code. Given that you are able to query localFile in graphiql, data is being fetched properly from Shopify. Can you share the error and also try to debug what value you are getting for images variable?

[PHironaka]

@nikhilag I'm not receiving any errors in the cli. In browser, the screen just goes blank white. As you mentioned, data is being properly fetched from Shopify, here's what I'm seeing upon running Gatsby Develop:

success open and validate gatsby-config — 0.006 s
success load plugins — 0.218 s
success onPreInit — 0.994 s
success delete html and css files from previous builds — 0.149 s
success initialize cache — 0.005 s
success copy gatsby files — 0.036 s
success onPreBootstrap — 0.015 s
⠁ 
gatsby-source-shopify/pjh-test starting to fetch data from Shopify
⠄ source and transform nodes
gatsby-source-shopify/pjh-test fetched and processed policies: 618.956ms

gatsby-source-shopify/pjh-test fetched and processed blogs: 626.033ms
⠈ source and transform nodes
gatsby-source-shopify/pjh-test fetched and processed collections: 920.970ms
⠁ source and transform nodes
gatsby-source-shopify/pjh-test fetched and processed productTypes: 984.036ms
⠠ source and transform nodes
gatsby-source-shopify/pjh-test fetched and processed articles: 2794.115ms
⢀ source and transform nodes
gatsby-source-shopify/pjh-test fetched and processed products: 3699.781ms

gatsby-source-shopify/pjh-test finished fetching data from Shopify: 3725.516ms
success source and transform nodes — 3.792 s
success building schema — 0.406 s
success createPages — 0.001 s
success createPagesStatefully — 0.031 s
success onPreExtractQueries — 0.006 s
success update schema — 0.269 s
success extract queries from components — 0.211 s
success run graphql queries — 0.050 s — 3/3 64.50 queries/second
success write out page data — 0.008 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 11.733 s

 DONE  Compiled successfully in 2330ms                                                                                                                                 07:49:01


You can now view gatsby-starter-hello-world in the browser.

  http://localhost:8001/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8001/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.

[PHironaka]

@nikhilag I think I figured out the issue...I had a product in my shopify account w/o an image associated to it. That must've thrown it off. Images are showing up for me now. Thank you for your help!