Skip to content
This repository has been archived by the owner on Dec 22, 2018. It is now read-only.

Unknown field childImageSharp on type File #10

Open
corygibbons opened this issue Jun 22, 2018 · 17 comments
Open

Unknown field childImageSharp on type File #10

corygibbons opened this issue Jun 22, 2018 · 17 comments

Comments

@corygibbons
Copy link
Contributor

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
Copy link
Owner

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
Copy link

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
Copy link

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

@witbybit
Copy link
Contributor

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

@witbybit
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

@nikhilag great! I'll try it out

jlengstorf added a commit to gatsbyjs/store.gatsbyjs.org that referenced this issue Oct 5, 2018
- Moves all dependencies to the latest stable release
- Switches over to @nikhilag’s Shopify plugin (see angeloashmore/gatsby-source-shopify#10 for reasoning)

closes #107
jlengstorf added a commit to gatsbyjs/store.gatsbyjs.org that referenced this issue Oct 5, 2018
- Moves all dependencies to the latest stable release
- Switches over to @nikhilag’s Shopify plugin (see angeloashmore/gatsby-source-shopify#10 for reasoning)

closes #107
@angeloashmore
Copy link
Owner

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
Copy link

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
Copy link
Contributor

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

@PHironaka
Copy link

@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
Copy link
Contributor

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
Copy link

@nikhilag unfortunately it is still not working

@PHironaka
Copy link

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

@witbybit
Copy link
Contributor

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
Copy link

@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
Copy link

@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!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants