title: React Relay where should useQueryLoader, loadQuery be with pagination and filtering
body: <p>Context:<br />
  The idea is that there is root component which contains three basic children: <code>Filter Input/Select Fields</code>, <code>List of Items</code>, and <code>Page based Paginator</code>.</p>
  <p>There are two parts of data that needs to be fetched: Options for the select fields, and the list of items, for which the connection includes page cursors information.</p>
  <p>Minimum code as follows:</p>
  <p><strong>Parent</strong></p>
  <pre><code>const RootQuery = graphql`...`
  
  export default function Root() {
      const [RootQueryRef, loadQuery] = useQueryLoader&lt;RootQueryType&gt;(RootQuery);
      
      const pageAfter = useParam('after')
      useEffect(() =&gt; {
          loadQuery({ after: after })
      }, [after])
  
      returns...
      &lt;SelectField... /&gt;
      &lt;SelectField... /&gt;
      
      &lt;ListItems queryRef={RootQueryRef} ... /&gt;    
  </code></pre>
  <p><strong>ListItems</strong></p>
  <pre><code>imports RootQuery
  
  export default function ListItems({ queryRef }) {
      const data = usePreloadedQuery(RootQuery, queryRef);
      
      returns...
      data.listData.map(edge =&gt;
          &lt;ListItems data={edge.node&gt;
      )
      &lt;Paginator pageCursors={data.pageCursors} /&gt;
  }
  </code></pre>
  <p>So the paginator is actually a child of ListItems, which sets url params for page. The root component reads that param and reloads when page changes.</p>
  <p>It is expected that upon page change only the <code>ListItems</code> component rerenders, which currently works as expected, however, the <code>ListItems</code> gets its data by calling <code>usePreloadedQuery</code>, but the filter fields actually live in the <code>Root</code> component, and their values are saved in state instead of the url. So I'm confused as to how they get the preloaded options data when they are in the root component that calls useQueryLoader. I don't want to use a separate container for the filter fields because then I would need to pass down a bunch of input states from root (lifting state) in order to use their values for filtering.</p>
  <p>I'm not sure whether my structure for the queries is correct at all, it feels counter-intuitive and messy. I am new to Relay so please let me know if there is a more desirable pattern.</p>