I went through a similar issue. Luckily I found this to work with string interpolations:

// Option 1
$postName
const query1 = `file(relativePath: {eq: $postName}) { ... }`

// Option 2
${({postName})

const query2 = `file(relativePath: {eq: ${({postName})}) { ... }`

Have a look at a snippet of code I used for one of my projects: https://github.com/timrodz/.com/blob/master/src/components/common/Button/index.js#L33

Short answer: You can't.

Follow the discussion on the github repo. If you scroll all the way down, it looks like it will be available in the next few releases.

Workaround

• Query for all the data.
• Filter for the specific data you need. You can use variables in array functions.

Here an implementation with gatsby-image that I use in my project

const Page = (props) => {
  const { data: { allFile: { edges } } } = props;
  const oneImage = edges.filter(edge => // filter with your variable
    edge.node.childImageSharp.fluid.originalName === props.yourVARIABLE)[0].node.childImageSharp.fluid;
  {/* ... */}
}
export const query = graphql`
// ...

EDIT

In your comment, you made a mistake destructuring your props in the parameters of your arrow function. This is your revised code:

const BackgroundDiv = (props) => { 
  // destructuring all the props to make it clear
  const postName = props.postName // the variable you want to filter for
  const className = props.className;
  const children = props.children;
  const { data: { allFile: { edges } } } = props; 

  const oneImage = edges.filter(edge =>  
    edge.node.childImageSharp.fluid.originalName === postName)[0].node.childImageSharp.fluid;