GraphQL String interpolation is not allowed in graphql tag

I know there are so many questions about this issue, but I honestly can't understand any of the answers.

What I understand is that everything happens at build time, and my code supports that.

What I want, is to access a folder that is the same name as the field "slug" in my data. I create the pages in the gatsby-node.js file.

Here is my code for that:

gatsby-node.js

exports.createPages = ({ actions }) => {
    const data = require("./src/data/data.json")
    const { createPage } = actions
    data.forEach(data => {
        createPage({
            path: `/${data.slug}/`,
            component: require.resolve('./src/templates/listing-template.js'),
            context:{data},
        })
    })
    
  }

I send the data in the context.

Now in my component, I want that data to be used in the query to get the specific folder for that page:

listing contains the data, and in filter: { relativeDirectory: { eq: I want to use it;

I have tried: ${listing.slug} but graphql won't allow it inside the eq.

How can I do this?

The query just takes all the files from the specified folder

const Listing2 = ({listing}) => {
  
  const { casape } = useStaticQuery(
    graphql`
      query {
        allFile(
          sort: { fields: name, order: DESC }
          filter: { relativeDirectory: { eq: "casape" } }
        ) {
          edges {
            node {
              id
              name
              childImageSharp {
                fluid(maxWidth: 1000) {
                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
              }
            }
          }
        }
      }
    `
  )

I then use those returned images to create a gallery by the way.

What I tried:

const Listing2 = ({listing}) => {
  
  const query = `
  query {
    allFile(
      sort: { fields: name, order: DESC }
      filter: { relativeDirectory: { eq: "casape" } }
    ) {
      edges {
        node {
          id
          name
          childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
      }
    }
  }
  `
  query.replace("casape", listing.slug)

  const { allPhotos } = useStaticQuery(graphql`${query}`)

I also tried using the method graphQl(query, parameters: {slug : listing.slug}}

and did

query Name($id = String!){
    allFile(
      sort: { fields: name, order: DESC }
      filter: { relativeDirectory: { eq: $id
 } }

But I get undefined.