GraphQL,Gatsby 插件敏锐和反应:我正在尝试在我的查询中包含对 device.width 的 javascript 计算,但我似乎无法让它工作。目标是根据客户端的设备屏幕宽度进行查询,以便站点可以提供响应式图像。我试图让它像这样工作,deviceWidth 返回一个 Int,并将它作为 responsiveSizes 的参数传递给查询:
const deviceWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
export const pageQuery = graphql`
query BlogPostBySlug($slug: String! ) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
timeToRead
excerpt
frontmatter {
title
cover
date
category
tags
thumbnail {
childImageSharp {
responsiveSizes(maxWidth: deviceWidth, quality: 50, cropFocus: CENTER, toFormat: JPG) {
src
srcSet
sizes
base64
}
}
}
}
fields {
slug
}
}
}
`;