Cannot query field "imageSharp"

[bkroeker]

I feel like I must be missing something basic, but I can't tell what. No matter how I configure things, I'm just not able to query the *Sharp version of images.

I'm running 3.4.0-beta.2 of this plugin, which is the latest I can see.

I'm configuring the plugin with

        sharpKeys: [
          /image|photo|picture|logo|icon/,
        ]

My query looks (essentially ... it's cropped for brevity) like:

query PageQuery($uid: String!, $lang: String!) {
    prismic {
      page(uid: $uid, lang: $lang) {
        body {
          ... on PRISMIC_PageBodyCustomSlice {
            primary {
              image
              imageSharp {
                childImageSharp {
                  fluid(maxWidth: 400, maxHeight: 250) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
...

When it runs, I get the error: Cannot query field "imageSharp" on type "PRISMIC_PageBodyCustomSlice". Did you mean "image"?

I've tried all kinds of variations, and read the documentation multiple times, but I can't tell what I'm doing wrong. Any advice?

[florianpeninon]

I am not sure if it can help you but I solved a similar issue by re-ordering my plugins and calling gatsby-transformer-sharp and gatsby-plugin-sharp last.

[bkroeker]

@florianpeninon Thanks for the suggestion. I tried this, but it didn't make a difference.

[MichalMoravik]

@bkroeker did you try gatsby clean before gatsby develop? Btw I had an error in GraphiQL but I just decided to add that graphQL query to my code and it works. So it can show an error in GraphiQL but it can still work in the code

[bkroeker]

Yeah, I always clean before develop, actually. And yes, I tried it in my StaticQuery too, not just in the visual query explorer.

I'll see if I can start a fresh gatsby project with just this plugin, and check if it works.

[bkroeker]

I tried a fresh gatsby project and it worked. So now I'll need to trace through all the differences to see if I can identify what's breaking it.

[leonstern10]

@bkroeker were you able to solve this? I am having a similar problem on GraphiQL when trying the following: query MyQuery { prismic { allHome_pages { edges { node { body { ... on PRISMIC_Home_pageBodyLists_grid { fields { list_image list_imageSharp { childImageSharp { fluid(maxWidth: 10) { ...GatsbyImageSharpFluid } } } } } } } } } } }

This is the error: { "message": "Failed to fetch", "stack": "TypeError: Failed to fetch" }

[bkroeker]

@leonstern10 Unfortunately, the funding on my project was cut due to Coronavirus, so I haven't yet had a chance to delve into figuring out which plugin/code is breaking this plugin's image sharp implementation.

For now I'm just calling it karma/retribution for this plugin breaking all uses of the useStaticQuery hook. :D

[leonstern10]

@bkroeker Sorry to hear that! Haha if I find a solution I will let you know :)

[szokrika]

gettring similar error when building for production. building for development first time fails, second time it works. seems like the images are not downloaded before the query was run? Is there a way to order the plugins in gatsby-config.js

childImageSharp {
   fixed(width: 320, height: 320, cropFocus: ENTROPY) {
     ...GatsbyImageSharpFixed
   }
   fluid(maxWidth: 800, quality: 90) {
     ...GatsbyImageSharpFluid
     presentationWidth
   }
 }

"gatsby-source-prismic-graphql": "3.5.0",

[MichalMoravik]

@szokrika I have probably the same error as you. First time I run gatsby develop or gatsby build it cannot develop or build because in .cache/caches , the files are not built. The entire gatsby-source-prismic-graphql folder is missing, it does not create it.

When I run gatsby develop for the second time it creates that cache folder and it works. But this is a huge problem while you are building.

[szokrika]

@MichalMoravik I think I fixed it by downgrading to "gatsby-source-prismic-graphql": "3.3.1",

this then threw a gatsby-browser.js error, but generated the images

then upgraded to

"gatsby-source-prismic-graphql": "3.4.1-alpha.0",

this cleared the previous gatsby-browser.js error

[MichalMoravik]

Perfect! I switched to 3.4.1-apha.0 as well and everything works. Thanks @szokrika , köszönöm sepen ;). You saved me some valuable hours.

[ohlr]

@birkir @bkroeker I think this can be closed as as this seems to fixed?