How do I use sharp image with Strapi 4 and Gatsby 4

Question

I'm want to use images from my Strapi V4 local backend to my Gatsby 4 using sharp image processing.

I was able to with Strapi 3 + Gatsby 3, but have recently upgraded to Strapi 4 and Gatsby 4 to avoid future deprecation.

This is my gatsby-config.js:

    plugins: [
        "gatsby-plugin-sass",
        "gatsby-plugin-image",
        "gatsby-plugin-sharp",
        "gatsby-transformer-sharp",
        {
            resolve: "gatsby-source-graphql",
            options: {
                // Arbitrary name for the remote schema Query type
                typeName: "STRAPI",
                // Field under which the remote schema will be accessible. You'll use this in your Gatsby query
                fieldName: "strapi",
                // Url to query from
                url: "http://localhost:1337/graphql",
            },
        }
    ]

This is a file (page within my gatsby site) i've been testing on, it doesn't work.

import React from "react";

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const Test = ({ data }) => {
  const image = getImage(strapi.food.data.attribute.thumbnail.data.attribute)
  return (
    <div>
      <GatsbyImage image={image} alt={"Come on!"} />
    </div>
  )
}

export const pageQuery = graphql`
query FoodQuery {
  strapi {
    food(id: "67") {
      data {
        attributes {
          name
          thumbnail {
            data {
              attributes {
                childImageSharp {
                  gatsbyImageData(width: 200)
                }
              }
            }
          }
        }
      }
    }
  }
}
`
export default Test;

The error I keep getting is.

  25:17  error  Cannot query field "childImageSharp" on type "STRAPI_UploadFile"  graphql/template-strings

I've tried many things. I've checked to see if I can at least pull text and number fields, I can, all of them even attributes in the thumbnails object like createdAt.

I've checked to see if permissions are correct, and they seem fine - find, fineOne are both checked for the content-type and upload.

I've tried to query the uploadFile. And tried to pull food items one at a time and as a array/list of foods.

I've tried changing where I've placed childImageSharp as well as moving brackets around.

Edit: This is my GraphiQl sandbox with everything I can gather.

So I guess the query isn't working either in the GraphiQL playground, isn't it? Can you provide a CodeSandbox? — Ferran Buireu, Dec 27 '21 at 05:40
I can't get it working in the GraphiQL sandbox. I've added a screenshot of my GraphiQl window and the data I've been able to pull to show I'm able to pull data - just not use sharp image library. — TriThomas, Dec 27 '21 at 13:17
Well, you are able to fetch data from the thumbnail but not the childImageSharp node which is what you need to pass to Gatsby Image. Why you don't just use `gatsby-plugin-strapi` instead? — Ferran Buireu, Dec 28 '21 at 06:17
I’ve worked past this. The current official `gatsby-source-strapi` has not been updated for `v4` yet, there is an unofficial fork of `gatsby-source-strapi` for `v4` by relate https://github.com/relate-app/gatsby-source-strapi which works. — TriThomas, Jan 15 '22 at 09:38
The fork by relate works fairly well. Hopefully the official package is updated soon and migration is easy. This is how people have to deal with it for the moment. — TriThomas, Jan 15 '22 at 09:40

How do I use sharp image with Strapi 4 and Gatsby 4

0 Answers0