title: GraphQL query to order references according to the order in the contentful web app
body: <p>Im experimenting with Contentful and Gatsby. The goal is to create a website, where the editors can build together landing pages from sections.
  I have a content type which represents a page wrapper. This content type has the field &quot;Sections&quot; which type is References(many). With this field I can link multiple content types. This linked content types appear one below the other. The editor can reorder them with drag and drop. See Screenshot:</p>
  <p><a href="https://i.stack.imgur.com/ospfn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ospfn.png" alt="enter image description here" /></a>
  This order however is not visible when I render these content types. By default, the order is based on the creation date of the linked content. There are some sorting options in the graphql playground, but none of them reflects my actual drag n drop order in the page wrapper.
  Here is my graphql query, and the code to map and render the sections</p>
  <pre><code>import ...
  const Sections = () =&gt; {
  const data = useStaticQuery( 
      graphql`
          query Sections {
              allContentfulSection {
                  edges {
                      node {
                          id
                          title
                          heroImage {
                              fluid(maxWidth: 750) {
                                  ...GatsbyContentfulFluid
                              }
                          }
                      }
                  }
              }
          }
      `
  )
  
  return (
  
      &lt;div className=&quot;sections&quot;&gt;
          {data.allContentfulSection.edges.map(edge =&gt; {
              return (
                  &lt;div className=&quot;section&quot; key={edge.node.id}&gt;
                      {edge.node.heroImage &amp;&amp; (
                          &lt;Img
                              className=&quot;featured&quot;
                              fluid={edge.node.heroImage.fluid}
                              alt={edge.node.title}
                          /&gt;
                      )}
                      &lt;h2&gt;
                          {edge.node.title}
                      &lt;/h2&gt;
                  &lt;/div&gt;
              )
          })}
      &lt;/div&gt;
  
     )
   }
  
  export default Sections
  </code></pre>
  <p>Can someone tell me a graphql query that is ordering the linked references like they are appearing in the parent page wrapper content? This should be possible right? Why should we be abele to reorder references with drag and drop in the contentful web app, if this has no effect on anything on your rendered website?</p>