GraphQL Fragments Are the Best Match for UI Components
One thing I keep running into is that for a few of my app ideas, I&#x27;m not really interested in just having static queries known at build time, like Relay and Apollo are designed for. I specifically want them to be dynamic and actually based on what components get rendered.<p>Consider this query from the article:<p><pre><code>    query ProfilePageData {
      user(handle: &quot;manifoldco&quot;) {
        ...HeaderData
        ...SidebarData
        ...TweetListData
      }
    }
</code></pre>
That&#x27;s great if the ProfilePage component knows that it only contains the Header, Sidebar, and TweetList components. Since they&#x27;re designed for static queries, both Relay and Apollo suffer from this shortcoming: the parent query needs to know about every component that could possibly add fragments ahead of time, and pull them all in. In my opinion, this really fails at fulfilling the promise of components – the parent shouldn&#x27;t need to know what all its descendants do.<p>What if the rendered components are more dynamic? Putting @skip directives on every field is not really an option (and then you need a matching query $variable for every directive.)<p>If you think of the query as more of a template, then you could have portions of the query that are like &quot;template blocks&quot; that other components could extend, e.g.:<p><pre><code>    query ProfilePageData {
      user(handle: &quot;manifoldco&quot;) {
        ${userFragments}
      }
    }
</code></pre>
...then descendant components could have access to `userFragments` as an extension point. I&#x27;m not yet sure if it&#x27;s a terrible idea, but I started a project just the other day to experiment with it: <a href="https:&#x2F;&#x2F;github.com&#x2F;exogen&#x2F;apollo-dynamic-queries" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;exogen&#x2F;apollo-dynamic-queries</a>