COVID19 Lockdown Dev Log – Day 2, Querying For Data With GraphQL

What I Worked On

Using Gatsby and GraphQL for my portfolio site. Specifically, I practiced querying for data in Gatsby with GraphQL.

What I Learned

Working with data in Gatsby is done (mostly) with GraphQL. I’ve never used GraphQL, so like CSS-Modules yesterday, I read up on it and watched some tutorials (link in Resources).
When you want to add data to your page or component in Gatsby it’s done in two ways:

in pages using GraphQL outside the page component definition
in components using Gatsby’s StaticQuery API, which is quite new apparently.

The data can come from your “gatsby-config.js” file, APIs, databases CMSs etc. This should come in handy for adding and displaying my projects on my portfolio site using a headless CMS. I found out that Netlify CMS can be used for just that. Even better, it’s easily integrable with Gatsby! 😀

This is querying for data in a page component (about.js). We ask for the data in the “gatsby-config.js” file, which contains an object with metatags. In the metatag there is a ‘title’. That is the value we want

This is querying for data in a component (layout.js). We ask for the data in the “gatsby-config.js” file, which contains an object with metatags. In the metatag there is a ‘title’. That is the value we want

//This is the gatsby-config.js file that we retrieve the title from.
//Ignore the 'plugins'. 

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

What Distracted Me During The Day

YouSee – transfering a phonenumber
My gf – she made me a strawberry smoothie
My gf (again) – asked me to join her for a walk. I did 😀
Friend needing help with HTML and CSS
YouTube

Resources