使用盖茨比图像进行内容丰富的+ Algolia搜索

Question

我的盖茨比/内容丰富的博客正在使用Algolia搜索博客文章。除了显示图像之外，一切工作都很好。

这是我已经使用Algolia模板在Contentful中创建的Webhook有效负载：

{
  "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}"
}

我的阿尔及利亚查询如下：

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

现在，当我键入gatsby构建时，算法正在接收的数据结构不正确。查看下面的图片。我希望结构为-image：image.url，这样我就可以获取图像的url并将其粘贴到hit组件中以显示图像。

我的查询出问题了吗？

我真的不知道我在做什么错..

Answer 1

据我所知，尽管不支持片段本身，但Algolia图像和媒体查询仍需要使用与Gatsby image fragments相同的数据进行填充。在您的情况下，它看起来像：

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

另一方面，您的transformer对我来说还不错。

检查Algolia的配置我已经意识到我所有的图像路径都在本地设置（使用/static）。我猜想Algolia需要填充静态资产，而不是外部URL。尝试在配置中添加downloadLocal: true：

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

并使用localFile查询进行分发：

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