Strapi Gatsby Tutorial #3 - Explaining the Gatsby Code
Welcome to this tutorial series where I will guide you through the process of setting up and deploying a static blog site using the powerful combination of Strapi and Gatsby. You can follow along with the tutorial outlined here: https://strapi.io/blog/how-to-build-a...
GitHub link: https://github.com/GideonNeedleman/st...
Strapi is a headless CMS that enables you to easily author content and expose it through an API. The flexibility of Strapi allows you to choose any frontend option and seamlessly query the API to retrieve your content. Gatsby is a React-based Static Site Generator that can process a diverse range of content through its GraphQL data layer. By leveraging the Strapi API, Gatsby transforms the content into HTML pages to create a dynamic and responsive experience.
For the third video we go over and explain the Gatsby code that we added in the previous video. We see how components fetch data using the `useStaticQuery` hook and `graphql` tag function. These static queries cannot accept variables.
Pages execute queries differently by exporting a graphql query and the resulting data is made available to the page functional component as `props.data`. Page queries can use also use variables. Often dynamic template pages will filter data for a specific id to generate pages for individual nodes.
Timestamps
00:00 Recap
00:20 Explaining the Layout Component
02:43 useStaticQuery & graphql
05:54 Index.js & Page queries
12:24 Individual post page & query variables
19:03 export Head