title: Dynamically create pages with Gatsby based on many Contentful references
body: <p>I am currently using Gatsby's <a href="https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#collection-routes" rel="nofollow noreferrer">collection routes API</a> to create pages for a simple blog with data coming from Contentful.</p>
  <p>For example, creating a page for each blogpost category :</p>
  <pre><code>-- src/pages/categories/{contentfulBlogPost.category}.js
  
  export const query = graphql`
    query categoriesQuery($category: String = &quot;&quot;) {
      allContentfulBlogPost(filter: { category: { eq: $category } }) {
        edges {
          node {
            title
            category
            description {
              description
            }
          ...
          }
        }
      }
    }
  
  ...
  [React component mapping all blogposts from each category in a list]
  ...
  </code></pre>
  <p>This is working fine.</p>
  <p>But now I would like to have multiple categories per blogpost, so I switched to Contentful's <code>references, many</code> content-type, which allows to have multiple entries for a field :</p>
  <p><a href="https://i.stack.imgur.com/sNHr1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sNHr1.png" alt="contentful content-model for blogposts" /></a></p>
  <p>Now the result of my graphQL query on field <code>category2</code> is an array of different categories for each blogpost :</p>
  <p>Query :</p>
  <pre><code>query categoriesQuery {
    allContentfulBlogPost {
      edges {
        node {
          category2 {
            id
            name
            slug
          }
        }
      }
    }
  }
  </code></pre>
  <p>Output :</p>
  <pre><code>{
    &quot;data&quot;: {
      &quot;allContentfulBlogPost&quot;: {
        &quot;edges&quot;: [
          {
            &quot;node&quot;: {
              &quot;category2&quot;: [
                {
                  &quot;id&quot;: &quot;75b89e48-a8c9-54fd-9742-cdf70c416b0e&quot;,
                  &quot;name&quot;: &quot;Test&quot;,
                  &quot;slug&quot;: &quot;test&quot;
                },
                {
                  &quot;id&quot;: &quot;568r9e48-t1i8-sx4t8-9742-cdf70c4ed789vtu&quot;,
                  &quot;name&quot;: &quot;Test2&quot;,
                  &quot;slug&quot;: &quot;test-2&quot;
                }
              ]
            }
          },
          {
            &quot;node&quot;: {
              &quot;category2&quot;: [
                {
                  &quot;id&quot;: &quot;75b89e48-a8c9-54fd-9742-cdf70c416b0e&quot;,
                  &quot;name&quot;: &quot;Test&quot;,
                  &quot;slug&quot;: &quot;test&quot;
                }
              ]
            }
          },
  ...
  </code></pre>
  <p>Now that categories are inside an array, I don't know how to :</p>
  <ul>
  <li>write a <em>query variable</em> to filter categories names ;</li>
  <li>use the slug field as a route to dynamically create the page.</li>
  </ul>
  <p>For blogposts authors I was doing :</p>
  <pre><code>  query authorsQuery($author__slug: String = &quot;&quot;) {
      allContentfulBlogPost(filter: { author: { slug: { eq: $author__slug } } }) {
        edges {
          node {
            id
            author {
              slug
              name
            }
            ...
          }
        ...
        }
  
  </code></pre>
  <p>And creating pages with <code>src/pages/authors/{contentfulBlogPost.author__slug}.js</code></p>
  <p>I guess I'll have to use the createPages API instead.</p>