title: GraphQL String interpolation is not allowed in graphql tag
body: <p>I know there are so many questions about this issue, but I honestly can't understand any of the answers.</p>
  <p>What I understand is that everything happens at build time, and my code supports that.</p>
  <p>What I want, is to access a folder that is the same name as the field &quot;slug&quot; in my data. I create the pages in the gatsby-node.js file.</p>
  <p>Here is my code for that:</p>
  <p>gatsby-node.js</p>
  <pre class="lang-js prettyprint-override"><code>exports.createPages = ({ actions }) =&gt; {
      const data = require(&quot;./src/data/data.json&quot;)
      const { createPage } = actions
      data.forEach(data =&gt; {
          createPage({
              path: `/${data.slug}/`,
              component: require.resolve('./src/templates/listing-template.js'),
              context:{data},
          })
      })
      
    }
  </code></pre>
  <p>I send the data in the context.</p>
  <p>Now in my component, I want that data to be used in the query to get the specific folder for that page:</p>
  <p><strong>listing</strong> contains the data, and in <strong>filter: { relativeDirectory: { eq:</strong> I want to use it;</p>
  <p>I have tried: <code>${listing.slug}</code> but graphql won't allow it inside the eq.</p>
  <p>How can I do this?</p>
  <p>The query just takes all the files from the specified folder</p>
  <pre><code>const Listing2 = ({listing}) =&gt; {
    
    const { casape } = useStaticQuery(
      graphql`
        query {
          allFile(
            sort: { fields: name, order: DESC }
            filter: { relativeDirectory: { eq: &quot;casape&quot; } }
          ) {
            edges {
              node {
                id
                name
                childImageSharp {
                  fluid(maxWidth: 1000) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                  }
                }
              }
            }
          }
        }
      `
    )
  
  </code></pre>
  <p>I then use those returned images to create a gallery by the way.</p>
  <p>What I tried:</p>
  <pre class="lang-js prettyprint-override"><code>const Listing2 = ({listing}) =&gt; {
    
    const query = `
    query {
      allFile(
        sort: { fields: name, order: DESC }
        filter: { relativeDirectory: { eq: &quot;casape&quot; } }
      ) {
        edges {
          node {
            id
            name
            childImageSharp {
              fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
      }
    }
    `
    query.replace(&quot;casape&quot;, listing.slug)
  
    const { allPhotos } = useStaticQuery(graphql`${query}`)
  </code></pre>
  <p>I also tried using the method
  <code>graphQl(query, parameters: {slug : listing.slug}}</code></p>
  <p>and did</p>
  <pre><code>query Name($id = String!){
      allFile(
        sort: { fields: name, order: DESC }
        filter: { relativeDirectory: { eq: $id
   } }
  </code></pre>
  <p>But I get undefined.</p>