What's new?

Gatsby and Strapi have always worked well together. With this stack, you can quickly build fast websites and grow organic traffic (here's one of these stories).

To make Gatsby + Strapi stack even more convenient, we updated the gatsby-source-strapi package. In addition to Strapi v4 and Gatsby 4 support, here are all the new things in this release:

• Full dynamic zone support

In our previous v1 release of this plugin, we parsed dynamic zones as the JSON type in GraphQL. While it was convenient, it also meant that you could not parse images or markdown in these fields. After listening to community feedback, we decided to stop relying on JSON, and provide full support for dynamic zones. To learn how write the queries for them, see our readme documentation.

• API token support

API tokens is one of the new neat features of Strapi v4. They allow to make requests to your Strapi API as an authenticated user. With this new release, you have to add a full-access API token in your Gatbsy config, and you'll be authorized to query to all your data. You'll no longer need to enable permissions in Strapi for each content type!

• Image handling in markdown files

One of Gatsby's strength is its image processing features. Now, you can benefit from them in all situations, even when your pictures are embedded in a rich text field. You can find these images in the data field of a markdown node.

• Full internationalization support

Gatsby Source Strapi now offers first-class support for localized content. For each content type, you can pass an i18n object in the pluginOptions. It lets you specify if you want your data in a specific locale, or if you prefer to query it in all available locales.

Improved Gatsby Cloud experience

Gatsby offers its own cloud solution, ensuring you get the fastest builds for your Gatsby applications. So while working on this v3 release, we also wanted to enhance the experience for our users deploying their apps on Gatsby Cloud.

• Incremental builds

When your application has a lot of data, build times can quickly become problematic. To avoid this, we now support incremental builds: we'll only rebuild a page if the data it consumes has actually changed. Therefore rebuilding an existing Gatbsy Cloud app should become much faster.

• Content Preview

When you are editing content in Strapi, a headless CMS, you may wonder what your changes will look like in production. You can now do that using Gatsby Cloud's CMS previews. To enable them in Strapi, follow the guide in our documentation. And to get a "Preview" button right in your Strapi UI, you can install our new Gatsby Preview plugin on Strapi Market.

Get started with Gatsby and Strapi

The easiest way to get started with Gatsby and Strapi is to use starters. We recommend that you try the one for Gatsby blogs, which has been recently updated with all the latest versions. To create your own application, type this command in a terminal:

1
yarn create strapi-starter my-project gatsby-blog

Once it's done, create an Strapi admin user, and go to the settings to create a full-access API token. Then, create a .env.development file with the following content:

1
STRAPI_TOKEN=<the API token you copied>

After saving the file, restart your server, and your Gatsby application should run!

Otherwise, if you want to learn more about how to use Gatsby Source Plugin, have a look at the full documentation or check out this demo of the plugin.

And as always, if you have bugs to report or features to request, let us know on GitHub and feel free to reach out to us on Twitter.

Happy coding!