title: How can I have multiple sibling instances of the same top level fragment container?
body: <p>I am following this guide: <a href="https://relay.dev/docs/en/quick-start-guide#composing-fragments" rel="nofollow noreferrer">https://relay.dev/docs/en/quick-start-guide#composing-fragments</a></p>
  <p>I am trying to create a higher level fragment container that queries data from the RootQuery:</p>
  <pre class="lang-js prettyprint-override"><code>export const FormInstanceListContainer: FunctionComponent&lt;Props&gt; = props =&gt; {
    const { data, ...rest } = props
    const { formInstances } = data
  
    return (
      &lt;FormInstanceList
        formInstances={formInstances}
        {...rest} // Forward all the other props
      /&gt;
    )
  }
  
  export default createFragmentContainer(FormInstanceListContainer, {
    data: graphql`
      fragment FormInstanceListContainer_data on RootQuery
        @argumentDefinitions(status: { type: &quot;FormStatus&quot; }) {
        formInstances(status: $status) {
          id
          form {
            id
            name
          }
          status
          createdAt
          submittedAt
        }
      }
    `,
  })
  </code></pre>
  <p>This works well as long as I only need one of these lists rendered. Here is a usage example:</p>
  <pre class="lang-js prettyprint-override"><code>const IndexPage: NextPage&lt;QueryResponse&gt; = data =&gt; {
    const handleOpenClick = (formInstance: FormInstance) =&gt; {
      NextRouter.push(`/form-instance/${formInstance.uuid}`)
    }
  
    const handleEditClick = (formInstance: FormInstance) =&gt; {
      NextRouter.push(`/form-instance/${formInstance.uuid}/edit`)
    }
  
    return (
      &lt;DefaultLayout&gt;
        &lt;Container maxWidth=&quot;md&quot;&gt;
          &lt;Typography variant=&quot;h5&quot; style={{ marginBottom: 25 }}&gt;
            My drafts
          &lt;/Typography&gt;
  
          &lt;FormInstanceListContainer
            data={data}
            onOpenClick={handleOpenClick}
            onEditClick={handleEditClick}
          /&gt;
        &lt;/Container&gt;
      &lt;/DefaultLayout&gt;
    )
  }
  
  export default withData&lt;pages_dashboard_Query&gt;(IndexPage, {
    query: graphql`
      query pages_dashboard_Query {
        ...FormInstanceListContainer_data @arguments(status: DRAFT)
      }
    `,
  })
  </code></pre>
  <p>Unfortunately, I need 2 of these lists rendered side by side... One for draft forms and one for submitted forms.</p>
  <p>I can't just include expand the same fragment again:</p>
  <pre><code>    query pages_dashboard_Query {
        ...FormInstanceListContainer_data @arguments(status: DRAFT)
        ...FormInstanceListContainer_data @arguments(status: SUBMITTED)
      }
  </code></pre>
  <blockquote>
  <p>ERROR:
  Expected all fields on the same parent with the name or alias 'formInstances' to have the same name and arguments.</p>
  </blockquote>
  <p>How then can I have more than one <code>FormInstanceListContainer</code> on the same page with different data? Have I hit a dead end the way I've designed my fragment container?</p>
  <hr />
  <p>The problem would be solved if I was able to run the queries in the top level page (since then I could use aliases) and pass the list of results to the <code>FormInstanceListContainer</code>. To do that it seems to me that the <code>FormInstanceListContainer</code> must request the fields of the query rather than the query itself:</p>
  <pre class="lang-js prettyprint-override"><code>export default createFragmentContainer(FormInstanceListContainer, {
    formInstance: graphql`
      fragment FormInstanceListContainer_formInstance on FormInstance {
        id
        form {
          id
          name
        }
        status
        createdAt
        submittedAt
      }
    `,
  })
  </code></pre>
  <p>However, now Relay assumes that a <em>single instance</em> of <code>FormInstance</code> should be passed to the container, not a list of them. Any way I try to pass a list causes Relay to crash. Is it possible to instruct Relay that it should expect a list of values rather than a single value?</p>
  <p>I am completely stuck.</p>