0

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
    }
  }
}
`;
4

1 回答 1

0

我认为这种方法不适用于盖茨比。

Gatsby 构建静态 HTML,将其保存到磁盘并提供给用户。然后 React 启动并接管 DOM。在您的方法中,要包含在 中的数据pageQuery是从浏览器计算的。这意味着pageQuery对于每个用户来说都是独一无二的。

我认为像gatsby-image插件会为你解决这个问题。

我猜它从 GraphQL 获取所有相关数据,因此您的查询是一致的,然后决定客户端加载哪个版本。

于 2018-02-15T13:17:01.990 回答