CODEWITHSUNDEEP
javascriptreactjsgraphqlgatsby
crowhill
crowhill

Reputation: 2548

Variables in graphQL queries

EDIT: now with working code below

The GraphiQL version

I have this query to fetch a gatsby-image:

query getImages($fileName: String) {
  landscape: file(relativePath: {eq: $fileName}) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        base64
        tracedSVG
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
        originalImg
        originalName
      }
    }
  }
}

And then this query variable:

{
  "fileName": "titanic.jpg"
}

The above works fine in GraphiQL.

The Gatsby version

Now I want to use it in Gatsby, so I have the following code:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <Img fluid={data.landscape.childImageSharp.fluid} />
  </div>
)

export const query = (
  graphql`
    query getImages($fileName: String) {
      landscape: file(relativePath: {eq: $fileName}) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    }
  `,
  {fileName: "knight.jpg"}
)

The above doesn't work. data.landscape.childImageSharp === null

What am I doing wrong?

EDIT:

The working version

Thanks for the help! The following code works pretty well. This post was particularly helpful. This is not an ideal solution, but it works for me.

import React from 'react';
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';

function renderImage(file) {
  return (
    <Img fluid={file.node.childImageSharp.fluid} />
  )
}

const MyImg = function (props) {

  return <StaticQuery
    query={graphql`
      query {
        images: allFile(filter: { sourceInstanceName: { eq: "images" } }) {
          edges {
            node {
              extension
              relativePath
              childImageSharp {
              fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
    `}
    render={(data) => {
      const image = data.images.edges.find(
        image => image.node.relativePath === "knight.jpg"
      )
      return(renderImage(image))
    }}
  />
}

export default MyImg;

Upvotes: 18

Views: 16621

Answers (2)

LekoArts
LekoArts

Reputation: 1569

The two answers (from Bens and Nimish) are wrong in this context, they're not specific to Gatsby.

If you want to use variables in the GraphQL queries, you have to pass them via context in the createPage function in gatsby-node.js as explained here: https://www.gatsbyjs.com/docs/creating-and-modifying-pages/#pass-context-to-pages

You currently can't use variables outside of that, e.g. have a look at this feature request: https://github.com/gatsbyjs/gatsby/discussions/10482

Upvotes: 16

Nimish Gupta
Nimish Gupta

Reputation: 1051

So to pass variables you have to use the following syntax

graphql(`<your_query_with_variable>`, { indexPage: <value_of_variable> })

So the query will come something like this

    export const query = grapqhl(
     `query getImages($fileName: String) {
      landscape: file(relativePath: {eq: $fileName}) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
           }
         }
       }
     }
    `,
    {fileName: "knight.jpg"}
   )

Upvotes: 5

Related Questions