title: Gatsby - extracting day and month from date field obtained in GraphQL query
body: <p>I'm a newbie web developer working with Gatsby, React, GraphQL and Javascript. I'm working on a simple blog site in which I have some markdown posts whose frontmatter dynamically populate a list of blogposts on a page. I've managed to get this working so far but I wondered how one can work with data obtained from a graphQL query. I'd like to display just the day and month of the post in a stylised way as shown below:</p>
  <p><a href="https://i.stack.imgur.com/GKtdO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GKtdO.png" alt="Stylised date" /></a></p>
  <p>I'm using the following code to pull through the date of the markdown posts:</p>
  <pre><code>    const data = useStaticQuery(graphql`
      query{
          allMarkdownRemark{
          edges{
            node{
              frontmatter{
                title
                date
                featuredImage{
                    childImageSharp{
                        fluid{
                          ...GatsbyImageSharpFluid
                        }
                    }
                }
              }
              fields{
                  slug
                }
            }
          }
        }
      }
      `)
  
    return(
          &lt;div id=&quot;blog&quot;&gt;
              &lt;div class=&quot;blog-pad&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;blog-posts&quot;&gt;
              
                  {data.allMarkdownRemark.edges.map((edge) =&gt;(
                      &lt;div class=&quot;blog-post&quot;&gt;
                          &lt;Img fluid={edge.node.frontmatter.featuredImage.childImageSharp.fluid} /&gt;
                          &lt;div class=&quot;meta&quot;&gt;
                              &lt;h3&gt;
                                  {edge.node.frontmatter.date}
                              &lt;/h3&gt; 
                              &lt;div class=&quot;title-date&quot;&gt;
                                  &lt;h3&gt;
                                      &lt;a href={&quot;/blog/&quot; + edge.node.fields.slug}&gt;{edge.node.frontmatter.title}&lt;/a&gt;
                                  &lt;/h3&gt; 
                                  &lt;p&gt;{edge.node.frontmatter.date}&lt;/p&gt;  
                                  &lt;p&gt;Author&lt;/p&gt;  
                              &lt;/div&gt;
                          &lt;/div&gt;    
                          &lt;/div&gt;
                  ))}
             
              &lt;/div&gt;
              &lt;div class=&quot;blog-pad&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      )
  </code></pre>
  <p>With a bit of styling added this results in:</p>
  <p><a href="https://i.stack.imgur.com/sairr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sairr.png" alt="My listing" /></a></p>
  <p>How can I extract just the day and month from this <code>{edge.node.frontmatter.date}</code>? I thought to write a javascript function to do some string formatting on it however I'm not quite sure how to go about writing the function nor how it fits into the context of jsx and graphQL. Would this query called <code>const data</code> get passed as a parameter to the function which would then return a string? return <code>&lt;p&gt;3 Dec&lt;/p&gt;</code></p>