Contentful + Algolia Search using Gatsby Image

Question

My Gatsby/Contentful blog is using Algolia to search through blog posts. Everything is working just fine, besides displaying images.

This is the Webhook Payload that Ive created in Contentful by using the Algolia template:

{
  "title": "{ /payload/fields/title/en-US}",
  "slug": "{ /payload/fields/slug/en-US}",
  "price": "{ /payload/fields/price/en-US}",
  "category": "{ /payload/fields/category/en-US}",
  "usages": "{ /payload/fields/usages/en-US}",
  "rating": "{ /payload/fields/rating/en-US}",
  "image": "https:{ /payload/fields/image/fields/file/url}"
}

My algolia query looks like this:

algolia.js



const contentfulQuery = `
{
    allContentfulStrains {
      nodes {
        id
        title
        price
        category
        image {
          file {
            url
          }
        }
      }
    }
  }
`

function pageToAlgoliaRecords({ id, title, price, image }) {
  return { objectID: id, title, price, image }

}

const queries = [
  {
    query: contentfulQuery,
    transformer: ({ data }) => data.allContentfulStrains.nodes.map(pageToAlgoliaRecords),
  }
]

module.exports = queries

Now when I type gatsby build the data algolia is receiving is not structured right. View the image below. I want the structure to be - image:image.url so I can get the url of the image and past it in the hit component to display the images.

Is there something wrong with my query?

I really dont know what Im doing wrong..

Answer 1

As far as I know, Algolia image and media queries needs to be populated with the same data as the Gatsby image fragments despite not supporting fragments per se. In your case it would look like:

image {
  childImageSharp {
    fluid {
      aspectRatio
      src
      srcSet
      sizes
      originalImg
      originalName
    }
  }
}

On the other hand, your transformer looks fine to me.

Checking my configuration for Algolia I've realized that all my images paths are set locally (with /static). I guess Algolia needs to be populated with static assets rather than an outer URL. Try adding the downloadLocal: true in your configuration:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `your_space_id`,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        downloadLocal: true,
      },
    },
  ],
}

And use a localFile query for distribution:

  localFile {
    publicURL
    childImageSharp {
      fluid(maxWidth: 500) {
          aspectRatio
          src
          srcSet
          sizes
          originalImg
          originalName
      }
    }
  }