Question

9

String interpolation in graphQL query

rated 0 times [ 12] [ 3] / answers: 1 / hits: 8966 / 5 Years ago, mon, may 13, 2019, 12:00:00

I am new to Gatsby and its graphQL query system to retrieve assets. I have a working component Image that fetches an image and displays it. I want to have the name of the image customizable but I can't figure out how to dit.

Here is the working component:

const Image = () => (

  <StaticQuery

    query={graphql`

      query {

        // fetching the image gatsby-astronaut.png

        placeholderImage: file(relativePath: { eq: gatsby-astronaut.png }) {

          childImageSharp {

            fluid(maxWidth: 300) {

              ...GatsbyImageSharpFluid

            }

          }

        }

      }

    `}

    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}

  />

);

And here is what I tried to have a customizable image:

const Image = ({ imgName }: { imgName: string }) => (

  <StaticQuery

    query={graphql`

      query {

        // fetching the image imgName

        placeholderImage: file(relativePath: { eq: ${imgName}.png }) {

          childImageSharp {

            fluid(maxWidth: 300) {

              ...GatsbyImageSharpFluid

            }

          }

        }

      }

    `}

    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}

  />

);

But it raises the following error for the query:

Expected 1 arguments, but got 2.ts(2554)

How can I have a customizable image name?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 react-datepicker, issue with monthsShown by default

Thu, Apr 4, 19, 00:00, 5 Years ago

View All

answered 5 Years ago patienceannel · Accepted Answer

Here is the easy way I ran into:

const Image = props => {

  const data = useStaticQuery(graphql`

    query {

      firstImg: file(relativePath: { eq: "firstImg.png" }) {

        childImageSharp {

          fluid(maxWidth: 300) {

            ...GatsbyImageSharpFluid

          }

        }

      }



      secondImg: file(

        relativePath: { eq: "secondImg.png" }

      ) {

        childImageSharp {

          fluid(maxWidth: 300) {

            ...GatsbyImageSharpFluid

          }

        }

      }

    }

  `)



  switch (props.name) {

    case "firstImg":

      return <Img fluid={data.firstImg.childImageSharp.fluid} />

    case "secondImg":

      return <Img fluid={data.secondImg.childImageSharp.fluid} />

    default:

      return <Img />

  }

}

and use it like this:

<Image name="firstImg" />

You can also make it typo-safe by introducing an object with all the images you might want to display, like this:

const Images = { firstImg: 'firstImg', secondImg: 'secondImg' }

and then use it like this:

<Image name={Images.firstImage} />

and

...

switch (props.name) {

case Images.firstImage:

...