How it works#
There are basically three steps:
1) Fetch data#
You can configure GatsbyJS to fetch data from different sources like headless CMSs, SaaS services, APIs, databases, your file system and more.
This is done with
The active GatsbyJS community has several plugins that can fetch data from various sources.
In this step there are three main technologies involved: GraphQL, React and Webpack.
GraphQL is a query language used to create APIs where you can create queries that generates exactly the data that you need (and only the data that you need). It is used to store and serve fetched data in a common and easily to access way.
It works with a basic rule: everything is a component, and every interface is built with a set of components. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
In GatsbyJS all pages are React components that receive data (if needed) from GraphQL and display some information.
It also is very flexible in its project structure allowing you to choose the way you want it to be, libraries you want to use, methods of styling and much more.
The last component is Webpack: a module bundler.
It is a tool that takes all the resources (pages, style sheets, images and other dependencies), combines them together, and generates a set of static pages that will be the final GatsbyJS site.
In development mode, it exposes the built site to a certain HTTP port (to see what we are developing) and rebuild it every time we create/edit/delete a file in the source code.