title: Pass string to a GraphQL StaticQuery in Gatsby
body: <p>I am trying to understand how StaticQuery works in a Gatsby/GraphQL workflow, and as a trial I want to build an article header with a background image.</p>
  
  <p>The image is defined in frontmatter of the markdown file I am building from (<code>frontmatter.feature</code>).</p>
  
  <p>I know the nature of StaticQuery is... well... static, so I cannot pass dynamic variables to a query. But that's not what I am doing - I think.</p>
  
  <p>Here's my example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>articleHeader(frontmatter) {
    if (frontmatter.feature) {
      return (
        &lt;StaticQuery
          query={graphql`
            query($base: String!) {
              file(base: { eq: $base }) {
                publicURL
              }
            }
          `}
          render={data =&gt; (
            &lt;ArticleHeader
              style={"background-image:url(" + data.file.publicURL + ")"}
            &gt;
              &lt;Heading&gt;{frontmatter.title}&lt;/Heading&gt;
            &lt;/ArticleHeader&gt;
          )}
        /&gt;
      );
    } else return &lt;Heading&gt;{frontmatter.title}&lt;/Heading&gt;;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is that I want to pass <code>frontmatter.feature</code> to my query so that I can query for <code>base: { eq: $base }</code> ... but how?</p>
  
  <p>Note: I've set up plugins properly, and I can query for files through the graphiql interface without issues.</p>