使用变量绘制QL查询

Question

GraphQL，Gatsby插件锐利并做出反应：我试图在我的查询中包含device.width的javascript计算，但我似乎无法使其正常工作。目标是基于客户端的设备屏幕宽度进行查询，以便站点可以提供响应式图像。我试图让它像这样工作，deviceWidth返回一个Int，并将其作为responseSizes的参数传递给查询：

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

Answer 1

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

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

我认为gatsby-image插件之类的东西会为你解决这个问题。

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