GatsbyJS is amazing

Gatsby is a headless CMS framework. Gatsby compiles to a static site, meaning that it can be hosted on a static file server or CDN. This is great, because there is no limits on traffic.

In many integrated solutions there is some kind of work being done on the server, and if enough people are asking for data at the same time, this "work" will be the performance bottleneck.

With gatsby you just get the single HTML file you need, and gatsby will then "hydrate" your site with the rest, so you still get a nice and responsive site.

To illustrate some of the nice features of gatsby, I have made a simple blog to showcase the features. The content of the site is in danish, but all the code is in english. link.

Firstly when you start gatsby development, it will check your files and generate a graphql schema you can query.

In my blog example the "blog" part uses markdown with Jekyll frontmatter. These frontmatter variables are inspected on build time and added to the schema.

After starting the dev environment you can introspect the graphql schema on localhost:8000/___graphql.
Notice that in the query MyQuery shown below I am asking to get the tags and title values from the schema. This is due to the fact that in my blog written in markdown these fields are defined using the jekyll syntax.

The markdownRemark field only returns the first element in the data list. The allMarkdownRemark query returns an optional paginated list of all the, in this case, blog posts.

In the above query I have demonstrated the pagination option while showing the total amount of blogs on the website.

Integration with visual studio code

There is a extension for vscode called Graphql from Apollo. This extension is cool, because it introspects your graphql endpoint and gives you in editor support.
Initially I have only used this with projects using the ApolloGraphQL stack.
When the gatsby develop script is running and localhost:8000/___graphql endpoint is live, you will get all the extension greatness.

Let's see how the a query looks in vscode

A Gatsby site does not have to have a database to be fully functional. However gatsby sites are best as static all access websites.

Intellisense with all queryable data? you got it

In editor support checking if data queried exists? no problem

The config

To get apollo graphql to work, you need a config file. For your convenience I have added the one I use for local development, and you should only need to change the name to something befitting your own gatsby site.

module.exports  =  {
    client:  {
        tagName:  'graphql',
        includes: ['./.cache/**/*.js',  './src/**/*.{ts,tsx}'],  // array of glob patterns
        service:  { name:  'theGuinnies', url:  'http://localhost:8000/___graphql'  },
    },
};

Just to clarify the globs added in the includes array:
the ./.cache part the the graphql queries added gatsby when introspecting the site, the next part is where all our own queries are specified. Why you ask?

You can add typescript types to fully type your queries from the graphql query

I have added a script called codegen in my package json, this will run the apollo cli tool to check all my queries, then introspect them against the graphql schema, from this it will generate typescript types reflecting the graphql schema. This makes the typescript typesafety go full circle, since a graphql api is strongly typed. I highly recommend you checking out how to generate types from graphql schemas. This is a legendary feature for developing typesafe consumers of a API.

GraphQL is awesome

There are many examples of a technology taking GraphQL to the next level, and gatsby is on of these. It allows you to build a static website, with no initial work at all.
It gives you the feeling of integrating with a database for your static data, and provides a simple interface to do so. This is shown when looking around in the GraphiQL playground.

Since there is no server, a static website has the best possibilities for instant load times and being able to perform, even under intense user load.

The Gatsby ecosystem provides plugins you can attach to your gatsby config file. An example of one of these is the markdown remark, which parses markdown to renderable html. Another example is the PWA plugin, which registers a service worker and makes your site cacheable.

Image the merge between a static site and a service worker? Apart from updates, your clients would have instant access to your website, even if they are offline. That is pretty neat stuff indeed.

An example of a plugin entry for google analytics:

{
    resolve:  `gatsby-plugin-google-analytics`,
    options:  {     
        trackingId:  'UA-142835995-1',
        // Defines where to place the tracking script - `true` in the head and `false` in the body
        head:  false,
        // Setting this parameter is optional
        anonymize:  true,
        // Setting this parameter is also optional
        respectDNT:  true,
    },
}

A full list of gatsby plugins can be found here.