Gatsby: Issue retrieving GatsbyImageSharpFluid_withWebp fragment

[PHironaka]

Summary

I've been experimenting with Shopify's storefront API, more specifically w/the help of gatsby-source-shopify

I used the source code from shop.gatsbyjs.org just for testing purposes, and to see if my items would display from my shop. They do, but I'm running into a bit of an issues with displaying the images.

{
  allShopifyProduct {
    edges {
      node {
        id
        images {
          localFile {
            childImageSharp {
              resolutions(width: 500, height: 300) {
                ...GatsbyImageSharpResolutions_withWebp
              }
            }
          }
        }
      }
    }
  }
} 

Here is the error I receive:

{
  "errors": [
    {
      "message": "Unknown fragment \"GatsbyImageSharpResolutions_withWebp\".",
      "locations": [
        {
          "line": 10,
          "column": 20
        }
      ]
    }
  ]
}

To confirm, gatsby-plugin-sharp, gatsby-transformer-sharp, and gatsby-source-filesystem' are all installed and listed in the gatsby-config.js file.

Any tips would be appreciated.

[LekoArts]

Please post your gatsby-config and the output of the cli info (as asked for in the issue template) as otherwise we cannot help you.

[stefanprobst]

The resolutions arg is called fixed in Gatsby v2, the same goes for the fragment names. See the docs

[PHironaka]

@LeKoArts

gatsby-config.js below:

module.exports = {
  siteMetadata: {
    siteUrl: 'https://store.gatsbyjs.org',
    title: 'Gatsby Store',
    description: 'Get Gatsby Swag!'
  },
  plugins: [
      'gatsby-plugin-react-helmet',

    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static`,
        name: 'images',
      },
    },

    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',


    {
      resolve: 'gatsby-source-shopify2',
      options: {
        shopName: 'pjh-test',
        accessToken: 'b1789fb840706bd4a461289089651e2e'
      }
    },
      'gatsby-plugin-emotion'
  ]
};

No issues w/compiling, but I do get a blank white screen in browser.

[PHironaka]

@LekoArts I was able to query localfile and childImageSharp in GraphQL, but I'm still having issues w/displaying images (and any nested arrays):

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} />
  </div>

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

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

      }
    }
  }
  }
`

Is there anything else I should be trying?

[LekoArts]

gatsby-image (<Img>) expects you to use fragments (or all properties) inside the fluid. So not only use tracedSVG there but the fragments.

[PHironaka]

@LekoArts thanks for the help! I'll give that a shot today.

[PHironaka]

@LekoArts still not able to display images:

{
  allShopifyProduct {
    edges {
      node {
        images {
          localFile {
            id
            childImageSharp {
              id
              fixed {
                base64
                tracedSVG
                aspectRatio
                width
                height
                src
                srcSet
                srcWebp
                srcSetWebp
                originalName
              }
            }
          }
        }
      }
    }
  }
}

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

Still no error messages, all those fragments listed are working. I'm only seeing a blank screen though.

[kilgarenone]

I'm getting Unknown Fragment using GatsbyImageSharpFluid_withWebp_tracedSVG but tracedSVG is fine in my http://localhost:8000/___graphql

query {
    file(relativePath: { eq: "headline.png" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid_withWebp_tracedSVG
        }
      }
    }
  }

[PHironaka]

@kilgarenone I was able to get this to work. I'd double check to make sure all your products in Shopify have at least one image. If they don't that's likely what's causing the error (as it was in my case).

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[dougbacelar]

After hours debugging, I found this section in the docs that explained my problem:

Note, due to a limitation of GraphiQL, you can not currently use these fragments in the GraphiQL IDE.

They work in the code but not in localhost:8000/___graphql

[sfonua10]

I'm getting an error with this code:

The fragment "GatsbyImageSharpFluid_withWebp" does not exist.

``const Hero = () => { const { image } = useStaticQuery(graphql
query {
image: file(relativePath: { eq: "jesus-christ.jpeg"}) {
sharp: childImageSharp {
fluid {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`)

```

Can anyone help?

[jonniebigodes]

@sfonua10 can you make a reproduction with your code and packages, following these steps so that it can better looked at?

[KabyleBOT]

Hello,
Can we use fragments in node.js file ?

[benedictjohannes]

Hello,
Can we use fragments in node.js file ?

No, you can't use Gatsby Image fragments in gatsby-node.js as in this comment