Hyper-fast development with Gatsby and DatoCMS

The wait is over! We finally have a new, blazing fast and super-stable plugin for our beloved Gatsby users!

Changes include, but are not limited to:

• ✨ Hyper-fast real-time content preview in watch mode

• 🌎 Locale fallbacks

• 🖼️ Support for traced SVG image placeholders

• 🛠️ GraphQL schema customization (no more random errors due to inferred types!)

Despite being a complete rewrite of the plugin, we made significant efforts not to break backward compatibility in any way, so you all should be able to upgrade your Gatsby v2 projects in like 30 seconds:

$ yarn upgrade gatsby-source-datocms
$ npm upgrade gatsby-source-datocms

In addition to that, we've also released a new Gatsby Remark plugin that intercepts any DatoCMS image contained in your markdown and processes it so that it can be safely used in the production build without the fear of serving heavy raw high-res images! Adding it to your project is — again — a matter of seconds:

$ yarn add gatsby-remark-images-datocms
$ npm install gatsby-remark-images-datocms --save

Continue reading below to discover in detail all the great, new features we’ve shipped! 💜

🛠️ No more random errors due to inferred types!

Yes, we know it might not sound like the fanciest update you can get, but this was THE single, most reported issue for our plugin — and for any other Gatsby source plugin, really — and finally it has been solved, once and for all. Hurray! 🎉

The way Gatsby has always offered a unified GraphQL API to fetch content coming from various external sources relies on Gatsby itself trying to guess a schema from whatever content is available at any given moment. While this strategy allowed plugin developers to build new integrations with Gatsby very quickly, it exposed the end-user to an endless number of confusing and hard to debug problems.

Gatsby 2.2.0 finally released some new APIs that allow plugin developers to finally customize the GraphQL schema. We started testing the new APIs with the Gatsby team the minute after they have been announced (thanks Mikhail Novikov for your support!) and the final result it's now ready.

So yep, no more broken builds for random reasons!

⚡ Hyper fast real-time content preview

We've always had watch mode, but now we've made it super-fast, as just the content that changes gets re-downloaded from the API.

Watch mode is enabled by default, so no need to add further flags in the plugin's options hash.

🖼️ Support for traced SVG image placeholders

In addition to blur-up placeholders for gatsby-image, now you can get traced SVG image placeholders as well!

To use them, you just need to replace the standard GatsbyDatoCmsFluid fragment with GatsbyDatoCmsFluid_tracedSVG (the same applies for GatsbyDatoCmsFixed and GatsbyDatoCmsFixed_tracedSVG) in your code:

1
import Img from 'gatsby-image';
2

3
class Authors extends React.Component {
4
  render() {
5
    const authors = this.props.data.authors.nodes;
6

7
    return (
8
      <ul>
9
        {
10
          authors.map(author => (
11
            <li key={author.id}>
12
              <Img fluid={author.avatar.fluid} />
13
              <h3>{author.name}</h3>
14
            </li>
15
          ))
16
        }
17
      </ul>
18
    );
19
  }
20
}
21

22
export const query = graphql`
23
  query SupportQuery {
24
    authors: allDatoCmsAuthor {
25
      nodes {
26
        id
27
        name
28
        avatar {
29
          fluid(maxWidth: 60) {
30
            ...GatsbyDatoCmsFixed_tracedSVG
31
          }
32
        }
33
      }
34
    }
35
  }
36
`;

Furthermore, gatsby-image will now automatically use WebP images when the browser supports the file format and fallback to the default image format otherwise.

📝 Responsive, optimized images in Markdown

We've released a new Gatsby Remark plugin that will intercept any DatoCMS image contained in your DatoCMS Markdown fields, and process them so they can be used in the production build.

In the processing, it make images coming from DatoCMS responsive by:

• Adding an elastic container to hold the size of the image while it loads to avoid layout jumps.

• Generating multiple versions of images at different widths and sets the srcset and sizes of the img element so regardless of the width of the device, the correct image is downloaded.

• Converting GIF images into <video> elements.

• Showing a blurred up or traced SVG placeholder until the actual image is downloaded.

If you already have the gatsby-transformer-remark plugin in your project (which is probably the case), then just add gatsby-remark-images-datocms to its plugins:

$ yarn add gatsby-remark-images-datocms

1
module.exports = {
2
  plugins: [
3
    // ...
4
    {
5
      resolve: `gatsby-transformer-remark`,
6
      options: {
7
        plugins: [
8
          `gatsby-plugin-sharp`,
9
          {
10
            resolve: `gatsby-remark-images-datocms`,
11
            options: {
12
              apiToken: process.env.DATO_API_TOKEN,
13
            },
14
          },
15
        ],
16
      },
17
    },
18
    // ...
19
  ],
20
};

🌎 Locale fallbacks

If you have a multi-language website, some translations for secondary languages might be missing. You can now globally specify a set of languages to use instead of the missing one:

1
  plugins: [
2
    {
3
      resolve: `gatsby-source-datocms`,
4
      options: {
5
        // In this example, if some field value is missing in Italian, fall back to English
6
        localeFallbacks: {
7
          it: ['en'],
8
        },
9
      },
10
    },
11
  ]

🇬🇧🇮🇹🇪🇸 Get all locales in a single query

If you need to get a field's value in every locale, you can now use the _all<FIELDNAME>Locales method:

{
  allDatoCmsBlogPost {
    nodes {
      _allTitleLocales {
        locale
        value
      }
    }
  }
}

This will return an array easy to iterate on:

1
{
2
  allDatoCmsBlogPost: {
3
    nodes: [
4
      {
5
        _allTitleLocales: [
6
          { locale: "en", value: "Hi there!" },
7
          { locale: "it", value: "Ciao!" }
8
        ]
9
      }
10
    ]
11
  }
12
}

🔍 Every meta attribute at your disposal

You can now get a lot of new meta-information regarding your records within the meta field:

1
{
2
  allDatoCmsBlogPost {
3
    nodes {
4
      meta {
5
        createdAt
6
        updatedAt
7
        publishedAt
8
        firstPublishedAt
9
        isValid
10
        status
11
      }
12
    }
13
  }
14
}

Wrap-up

We truly can’t wait to see the great things you build and how you will use all these new features and improvements. If you have any issues with the upgrade, just head over to our #gatsby Slack channel, we'll be there to help you.

Happy progressive web-apping everyone!