2

I'm trying to source images from Sanity with gatsby-source-sanity and gatsby-image. In the past I've had no issue querying the fluid image asset like so:

export const query = graphql`
  query {
    allSanityPicture {
      nodes {
        image {
          asset {
            fluid(maxWidth: 900) {
              ...GatsbySanityImageFluid
            }
          }
        }
      }
    }
  }
`;

However, for some reason the fluid and fixed fields of asset aren't showing up in GraphQL:

GraphQL fields

There's definitely an image on the node, as the url field works.

I've installed and configured my Gatsby plugins as required:

plugins: [
    {
      resolve: `gatsby-source-sanity`,
      options: {
        projectId: `mhlt1wid`,
        dataset: `production`,
        token: process.env.SANITY_TOKEN,
      }
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],

and deployed the GraphQL API with sanity graphql deploy.

What am I missing here? Have tried from scratch twice now on two fresh projects and still having the same issue.

Finnian Langham
  • 97
  • 7
  • It seems to be an open issue: https://github.com/sanity-io/gatsby-source-sanity/issues/114 (there are a lot of open threads) I know is not a solution but you can follow there the stack trace – Ferran Buireu Apr 11 '21 at 08:32
  • 2
    Thanks @FerranBuireu, I've "solved" the issue for the time being by downgrading to an older version of Gatsby – Finnian Langham Apr 12 '21 at 02:08

1 Answers1

1

What version of Gatsby were you using when you wrote this and what version did you downgrade to?

The GraphQL query format for Gatsby 4 has changed along with the gatsby-image component being deprecated in favor of gatsby-plugin-image.

According to this Gatsby article on migration, the older fragment-based method you use

   ...
     image {
      asset {
        fluid(maxWidth: 900) {
          ...GatsbySanityImageFluid
        }
      }
   ...

should be replaced in favor of the new syntax passing things like layout and format to the gatsbyImageData() resolver. The 'fluid' image type and 'maxWidth' have also been replaced with CONSTRAINED (in your case, or FULL_WIDTH if you want to just allow your tag to set the width of the image) and WIDTH which is understood as a maximum width for constrained type images. So in Gatsby 4 using gatsby-plugin-image your code should look something like:

       ...
         image {
          asset {
            gatsbyImageData(layout: CONSTRAINED, width: 900)
          }
         }
       ...

Here is more information about the new component and API, and here is a useful discussion of the new CONSTRAINED layout being used with width at the request.

James Hubert
  • 300
  • 3
  • 15