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! 😀
![](https://alarsen.one/blog/wp-content/uploads/2020/03/query-in-page-component-1024x543.png)
![](https://alarsen.one/blog/wp-content/uploads/2020/03/query-in-component-1024x544.png)
//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