DEV Community

Stephen Charles Weiss
Stephen Charles Weiss

Posted on • Originally published at stephencharlesweiss.com on

2

Gatsby Config Plugin Syntax

I often struggle with the syntax of config files. What are resolvers? How do options work? etc.

As a result, while making my way through Jason Lengstorf’s Introduction to Gatsby on Frontend Masters, I found the following interesting¹:

Within my gatsby-config.js file in the root of a Gatsby project, I have two plugins:

module.exports = {
    ...
  plugins: ['gatsby-plugin-emotion', 'gatsby-plugin-react-helmet']
  ...
}

That, however, is functionally equivalent to:

module.exports = {
    ...
  plugins: [{resolve: 'gatsby-plugin-emotion' }, {resolve: 'gatsby-plugin-react-helmet'}]
  ...
}

The former is just shorthand because for those, I didn’t need to add any configuration. What happens if I install a plugin that does require more detail about how it will be used? That’s where the fact that writing just gatsby-plugin-emotion is shorthand for an object starts to matter.

Using the gatsby-mdx as an example, we can see this in practice:

module.exports = {
  ...
  plugins: [
    {
      resolve: 'gatsby-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve('./src/components/layout.js'),
        },
      },
    },
  ],
  ...
};

What this is saying is that for any mdx files that I load, the files will be loaded into the layout template I defined in our src/components/layout.js.

There’s still the question of what options the gatsby-mdx will accept. For that, the docs are quite helpful in specifying the configuration options.²

Resources:

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up