title: How to use page query while using root-wrapper for providing Theme with Gatsby
body: <p>I am using <code>wrapRootElement</code> function in gatsby for providing <code>ThemeProvider</code> of <code>styled-component</code> on the root element. Here is the code :</p>
  <pre><code>export const wrapRootElement = () =&gt; {
    if (typeof window === 'undefined') return &lt;span&gt;Something went wrong!&lt;/span&gt;
    return(
        &lt;ThemeProvider theme={theme}&gt;
           &lt;FadeTransitionRouter&gt;
              &lt;Page path=&quot;/&quot; page={&lt;IndexPage /&gt;} /&gt;
              &lt;Page path=&quot;/plan&quot; page={&lt;PlanPage /&gt;} /&gt;
              &lt;Page path=&quot;/promos/:slug&quot; page={&lt;Template /&gt;} /&gt;
          &lt;/FadeTransitionRouter&gt;
        &lt;/ThemeProvider&gt;
  )};
  </code></pre>
  <p>Because of this I am compelled to use staticQuery in pages as page queries are not working there. But I need to use page queries to introduce variables in <code>graphql</code> queries. How can I achieve this ? If I do not use <code>wrapRootElement</code>, my page queries works fine. But it is important for me to use it as I need to provide my external Theme to all the pages.</p>
  <p>Thanks in advance.</p>