Graph QL Abfrage mit Variable

Question

GraphQL, Gatsby Plugin scharf und reagieren: Ich versuche, eine Javascript-Berechnung von device.width in meine Abfrage aufzunehmen, aber ich kann nicht scheinen, es funktioniert zu bekommen. Das Ziel besteht darin, basierend auf der Bildschirmbreite des Clientgeräts eine Abfrage durchzuführen, so dass die Site responsive Bilder liefern kann. Ich versuche es so zum Laufen zu bringen, mit deviceWidth einem Int Rückkehr und es bis in die Abfrage als Argument an responsiveSizes vorbei:

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

ich dieser Ansatz nicht denke, wird mit Gatsby arbeiten.

Gatsby erstellt statisches HTML, das auf dem Datenträger gespeichert und dem Benutzer bereitgestellt wird. Dann wird React gebootet und übernimmt das DOM. Bei Ihrem Ansatz werden die Daten, die in der pageQuery enthalten sind, vom Browser berechnet. Das bedeutet, dass die pageQuery für jeden Benutzer eindeutig ist.

Ich denke, etwas wie das gatsby-image Plugin wird dieses Problem für Sie lösen.

Ich denke, es erhält alle relevanten Daten aus GraphQL, so dass Ihre Abfrage konsistent ist, entscheidet dann auf dem Client welche Version geladen werden soll.