COVID19 Lockdown Dev Log – Day 10

What I Worked On

Using GraphQL to query the data for my projects in my portfolio

What I Learned

I wanted to add my data for eact project (description, title, links) in the Gatsby ‘static’ folder, because the project data is rather… well static. Once it’s added it will only ever change if I need to correct/update it (modifying a url or a typo maybe). However, looking at a project build with Gatsby and Netlify CMS from their own official website (link in resources) it seems to be a best practice to add your data under the ‘src/pages’ folder. So I did.

// folder structure

portfolio-v3
 -src
  -pages
   -projects
    --data (markdown)

I learned to render my data with GraphQL so now the projects are no longer hardcoded into the HTML. Here are some “before and after” code:

// index.js
//Before refactor

<div className="columns is-centered">
  <div className="column">
    <Project 
      description="A project involving the use of different technologies for the front-end and back-end. More about the project comes later." 
      gitUrl="www.github.com/HamDerAndrew" 
     />
   </div>
   <div className="column">
     <Project 
       description="A project involving the use of different technologies for the front-end and back-end. More about the project comes later."
       gitUrl="www.github.com/HamDerAndrew" 
      />
   </div>
   <div className="column">
     <Project 
       description="A project involving the use of different technologies for the front-end and back-end. More about the project comes later."
       gitUrl="www.github.com/HamDerAndrew" 
     />
   </div>
 </div>

// index.js
// After refactor

<div className="columns is-centered">
                    
  {data.allMarkdownRemark.edges.map(({ node }) => (
    <div className="column">
      <Project 
        keyId={node.id}
        cardTitle={node.frontmatter.title}
        description={node.excerpt}
        gitUrl={node.frontmatter.giturl}
        liveUrl={node.frontmatter.liveurl}
       />
    </div>
   ))}
</div>

It’s with this query in ‘index.js’ that I fetch the data:

export const query = graphql`
query {
    allMarkdownRemark {
        edges {
          node {
            excerpt
            frontmatter {
              title
              description
              giturl
              liveurl
            }
            id
          }
        }
      }
}
`

The data comes in the form of Markdown files:

---
title: Lambda Restaurant
description: Project description for SEO.
giturl: https://github.com/HamDerAndrew/Restaurant-site-template/
liveurl: https://delrestaurant.netlify.com/
---

A restaurant website build with only CSS Flexbox and HTML5

With the use of Gatsby plugins ‘ gatsby-transformer-remark ‘ and ‘ gatsby-source-filesystem ‘ GraphQL can fetch data from my local file system and render it as HTML.

What Distracted Me During The Day

• Discord
• Messenger
• Phonecall

Resources

• Netlify CMS with Gatsby template official – https://www.netlifycms.org/docs/start-with-a-template/
• Gatsby and Netlify CMS project GitHub – https://github.com/HamDerAndrew/gatsby-netcms
• Gatsby and Netlify CMS project Live – https://amazing-brahmagupta-0614d7.netlify.com/