Explore GatsbyJS to build dynamic static sites and apps. Gain insights into starters, themes, plugins, GraphQL data queries, styling, custom 404s, SEO, and cloud deployment.

tarball.tar.gz

gatsby_lark

gatsby_lark-with-draft-post

gatsby_lark-setting-up-lark

gatsby_lark-building-our-components-editor-1

gatsby_lark-copy-me

gatsby build

gatsby_build_with_draft

Gatsby is a React-based and GraphQL-powered static site generator. It delivers websites with excellent loading speed. It can be used to build diverse websites, including websites with static data—like portfolios and informative websites—and rich and dynamic web apps like blogs, e-commerce sites, and more. Gatsby fetches data at build-time from different sources and compiles it into static HTML, which can then be deployed to your favorite web server. 

In this course, you’ll learn about the basics of Gatsby, including the use of starters, themes, plugins, layouts, and pages. You’ll then learn how to query data with GraphQL and fetch data from various data sources. You’ll also see how to style Gatsby projects and add features such as custom 404 pages and SEOs. In the end, you’ll see how to deploy Gatsby websites on different cloud hosting platforms. 

This course enables new and existing frontend web developers to become masters in GatsbyJS and use this tool to create blazingly fast static web projects.

How to Gatsby: The Complete Course

# Fetching data in real-time

Until now, we’ve looked at how to fetch data that is stored within our project and in content management systems using GraphQL and source plugins. This data is fetched and processed at build time. The issue with this is that some of the data in the database might change after building the project and when the application runs, leaving our site with stale data.

> **Note:** Source (and some other) plugins have a way to keep fetching data in real time to keep the site updated.

Now, we look at fetching data hosted on an external server or environment using **REST API**. The code for this lives in the components where we wish to fetch and use this data. This data is fetched in real time. This means that it is fetched each time we visit (render) the page or component.

We can do this because Gatsby works with React under the hood. So, we can still use some of React’s API and hooks like `useState` and `useEffect`.

# What we’ll do

To demonstrate this, we use the Github REST API endpoint to fetch and display our latest five projects on Github on our “Works” page.

## Setting up

For our project repositories, we use this API endpoint:

```
https://api.github.com/users/${GITHUB_USERNAME}/repos?per_page=5&page=1&sort=updated
````

This endpoint returns the latest five public projects of the user sorted by their updated times.

## Writing the code

We replace the existing code in the `works.js` file with the code below:

Learn how to fetch external data at runtime using REST API in Gatsby.

Introduction to Course

Getting Started

Gatsby Basics

Data Sources

Fetching Data From Sources

Styling: Making Our Project Pretty

Features and Modifications

Deployment

Wrapping Up

Appendix

Fetching External Data Using REST API

Fetching data in real-time