How to pass a variable in gatsby graphql

Question

I want to render multiple images based on the passed relative path of image for each render of the same component. Here is my code

import Img from "gatsby-image";
import {useStaticQuery, graphql } from "gatsby";
const TeamMemberCard = ({ name, imageSrc, bio }) => {

    const imageData=useStaticQuery(graphql`query MyQuery {
        file(relativePath: {eq: ${imageSrc}}) {
          childImageSharp {
            fluid {
              aspectRatio
              base64
              sizes
              src
              srcSet
            }
          }
        }
      }`);

Then in JSX, I'm using image data as:

    <Img fluid={imageData.file.childImageSharp.fluid} alt="nothing"/>

But unable to use imageSrc as a variable to graphql.

Answer 1

This approach won't work. Please read the gatsby documentation. The only way to make your query parameterized is to add a variable to createPage API as described in gatsby documentation