The past few months have been crazy for Strapi. We released an official marketplace Strapi Market, organized a second global user conference, and released a powerful Strapi v4 with all of the awaited improvements. Likewise, the Gatsby team has been very busy and shipped a major v4. It was time to update our Gatsby Source Strapi package for this new generation of software, and that’s what we’re happy to announce today 🎉
Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app my-project
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:
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 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!
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.
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.
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.
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.
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.
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:
1yarn 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:
1STRAPI_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.
As part of the expansion team, Rémi's role is to help building and structuring the Strapi ecosystem, through projects like starters, plugins or the Strapi Market.
Get all the latest Strapi updates, news and events.