Contentful + Algolia Search 使用 Gatsby Image

Question

我的 Gatsby/Contentful 博客使用 Algolia 來搜索博客文章。 除了顯示圖像外，一切正常。

這是我使用 Algolia 模板在 Contentful 中創建的 Webhook Payload：

{
  "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 查詢如下所示：

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 build 時，algolia 接收的數據結構不正確。 查看下面的圖片。 我希望結構為 - image:image.url 以便我可以獲取圖像的 url 並將其傳遞到命中組件中以顯示圖像。

我的查詢有問題嗎？

我真的不知道我做錯了什么..

Answer 1

據我所知，盡管 Algolia 圖像和媒體查詢本身不支持片段，但需要填充與Gatsby 圖像片段相同的數據。 在你的情況下，它看起來像：

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