带有变量的 Graphql 查询

Question

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

Answer 1

我认为这种方法不适用于 Gatsby。

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

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

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