Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

## 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](https://strapi.io/user-stories/glean)).

To make Gatsby + Strapi stack even more convenient, we updated the [gatsby-source-strapi](https://www.npmjs.com/package/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](https://github.com/strapi/gatsby-source-strapi#dynamic-zones).

-   **API token support**

[API tokens](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.html#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`](https://github.com/strapi/gatsby-source-strapi#internationalization). 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](https://www.gatsbyjs.com/products/cloud/), 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](https://www.gatsbyjs.com/blog/2020-04-22-announcing-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](https://support.gatsbyjs.com/hc/en-us/articles/360055676874-CMS-Previews). To enable them in Strapi, follow [the guide in our documentation](https://github.com/strapi/gatsby-source-strapi#gatsby-cloud-and-preview-environment-setup). And to get a "Preview" button right in your Strapi UI, you can install our [new Gatsby Preview plugin](https://market.strapi.io/plugins/@strapi-plugin-gatsby-preview) 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](https://github.com/strapi/starters-and-templates/tree/main/packages/starters/gatsby-blog), which has been recently updated with all the latest versions. To create your own application, type this command in a terminal:

```
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:

```
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](https://github.com/strapi/gatsby-source-strapi#gatsby-source-strapi) or check out this demo of the plugin.

<iframe width="560" height="315" src="https://www.youtube.com/embed/XQ1SYI684VA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

And as always, if you have bugs to report or features to request, let us know on [GitHub](https://github.com/strapi/gatsby-source-strapi/issues) and feel free to reach out to us on [Twitter](https://twitter.com/strapijs). 

Happy coding!

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 🎉

large_Gatsby plugin blogpost cover.png

medium_Gatsby plugin blogpost cover.png

small_Gatsby plugin blogpost cover.png

thumbnail_Gatsby plugin blogpost cover.png

Gatsby plugin blogpost cover.png

Gatsby Source Strapi now supports v4 and Gatsby Cloud

Paris

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. 

Engineering

>*The updated version of this plugin supporting Strapi v4 and Gatsby Cloud has been released. Check it out [here](https://strapi.io/blog/gatsby-source-strapi-supporting-v4-and-gatsby-cloud).*

We know that many of you love using Strapi with Gatsby. It's a great match! Strapi can handle all your content workflows, and [Gatsby](https://strapi.io/integrations/gatsby-cms) makes that content shine by building super fast (dare I say *blazing*?) websites.

That's why we created the [gatsby-source-strapi](https://github.com/strapi/gatsby-source-strapi) plugin. It helps you query Strapi content in Gatsby, and lets you benefit from all the Gatsby goodness, like their automatic [image optimization](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/).

But our plugin was built in 2018, which, in the Jamstack world, is ages ago. So after [250.000](https://npm-stat.com/charts.html?package=gatsby-source-strapi) downloads, [65](https://github.com/strapi/gatsby-source-strapi/issues?q=is%3Aissue+is%3Aclosed) closed issues, and [55](https://github.com/strapi/gatsby-source-strapi/pulls?q=is%3Apr+is%3Aclosed) code contributions, it was time for a change. That's why we're happy to release our work in a new major version.

## What's new?

Both Strapi and Gatsby move fast and have recently released new versions and features. We have updated the plugin to let you benefit from the best and latest features of both products. This new release includes:

- **Internationalization support**

Strapi supports [Internationalization](https://strapi.io/features/internationalization) since v3.6. Before this release, our Gatsby source plugin only fetched content in the default locale. Now you can specify which locales you want to fetch for every content type. You can finally build websites that are translated for all your audiences!

<iframe width="560" height="315" src="https://www.youtube.com/embed/PKnJhcwhORE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

- **Fixed dynamic zones support**

Dynamic zones had become a common pain point when using Gatsby with Strapi. We have now changed their behavior to rely on the JSON type. No need to write complex GraphQL fragments anymore :)

- **Support for Gatsby v3**

The internal code of the plugin has been updated to work with Gatsby's latest major version. You can safely upgrade your Gatsby version and enjoy the [speed boost](https://www.gatsbyjs.com/blog/gatsby-v3/).

- **Support for arrays of images**

Gatsby will now parse image fields, even if they come from an array of media fields, like a carousel. This means you can use the gatsby-plugin-image in even more places, and build more performant image-heavy pages.

- **New README documentation**

The source plugin's documentation was rewritten. It now features more examples for advanced configurations, like [custom endpoints](https://github.com/strapi/gatsby-source-strapi#custom-endpoint) or [authenticated requests](https://github.com/strapi/gatsby-source-strapi#authenticated-requests).

## Update your app to the new version

As this is a major release, there are a few breaking changes you need to make to enjoy the new version.

### 1. Update your Gatsby and Strapi versions

We recommend that you start by upgrading your frontend to Gatsby v3. If you're coming from the v2 version, you can follow [Gatsby's official migration guide](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3).

Then, make sure that your Strapi application is up to date as well. You want to have at least version 3.6, where we introduced [internationalization](https://strapi.io/blog/announcing-content-internationalization-v3-6). If your Strapi version is older,  follow [our docs on how to update Strapi](https://strapi.io/documentation/developer-docs/latest/update-migration-guides/update-version.html#update-strapi-version).

### 2. Update the source plugin

Now that we're done with Gatsby and Strapi versions, it's time to update the actual source plugin. Inside your Gatsby frontend, open a terminal and run either of these commands:
#### Using Yarn
```
yarn add gatsby-source-strapi@latest
```
#### Using NPM
```
npm install gatsby-source-strapi@latest 
```

You should now see the 1.0.0 version in your `package.json`.

### 3. Rename `contentTypes` to `collectionTypes`

Strapi offers two content types: collection types and single types. To avoid any confusion, we renamed the `contentTypes` option to `collectionTypes`, since it doesn't handle single types. So you will need to make a small change in your `gatsby-config.js` file:

```
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-strapi`,
    options: {
      apiURL: `http://localhost:1337`,
      // Instead of contentTypes: [`article`]
      collectionTypes: [`article`],
      singleTypes: [`home-page`, `contact`],
    },
  },
];
```
### 4. Rewrite your dynamic zones queries

If you have tried using dynamic zones with Gatsby before, you may have written GraphQL queries that involved complex fragments. Instead, you can rewrite them to only query the dynamic zone field as a scalar:

```
{
  allStrapiPage {
    edges {
      node {
        id
        # contentSections is a Strapi dynamic zone
        # All its contents will be queried as JSON
        contentSections
      }
    }
  }
}
```
## Get started with Strapi & Gatsby

We love working with Gatsby and are happy to make it easier to use for you. If you want an even faster way to get started with Strapi and Gatsby, you can check out our starters:

- [Gatsby blog](https://strapi.io/starters/strapi-starter-gatsby-blog)
- [Gatsby catalog website](https://strapi.io/starters/strapi-starter-gatsby-catalog)
- [Gatsby corporate website](https://strapi.io/starters/strapi-starter-gatsby-corporate)

We'll be updating these to use our new source plugin very shortly. Make sure you [follow us on Twitter](https://twitter.com/strapijs) so you can find out when this happens.

In the meantime, enjoy the new plugin, and don't hesitate to give us your feedback on [GitHub](https://github.com/strapi/gatsby-source-strapi)!


The Product section covers our releases, feature reviews and more. 

Product

large_Gatsby plugin blogpost cover (1).png

medium_Gatsby plugin blogpost cover (1).png

small_Gatsby plugin blogpost cover (1).png

thumbnail_Gatsby plugin blogpost cover (1).png

Gatsby plugin blogpost cover (1).png

You might be interested in 

Introducing the new Gatsby Source Strapi plugin

 *Note: this article has been updated for Strapi v4. To find instructions about the v3 version of this plugin, check out [its page on npm](https://www.npmjs.com/package/strapi-plugin-sentry).*

Back in October, we ran a survey across the Strapi community. Your feedback was clear: plugins are essential to your workflow. They give you the option to expand Strapi's core capabilities as you see fit. They allow you to connect your favorite tools to your CMS, and build better, more ambitious apps with Strapi.

We also share that vision. Our plan for Strapi is to have an open marketplace showcasing quality plugins. That's why in 2021, we'll be focusing on building an ecosystem of plugins, by working with both partners and you, the community. Today, we're starting that journey with a highly requested plugin: Sentry 🎉

## What's Sentry, and why you should care

[Sentry](https://sentry.io/) allows developers to ensure the quality of their applications. It logs errors and gives you all the context you need to identify the source of the problem. Thanks to Sentry, You can identify the previous events that led to an error, and what commit introduced the bug. And once you can reproduce an issue, fixing it becomes much simpler.

This plugin lets you benefit from all these Sentry features within your Strapi app. Once you install it, the Sentry plugin will:
- Initialize a Sentry instance when your Strapi app starts
- Send errors encountered in your application's end API to Sentry
- Attach useful metadata to Sentry events, to help you with debugging
- Expose a global Sentry service

## How to use it

Sentry has always been a solution of choice among our users. Our users have been manually setting it up in their apps for years. But from now on, using it in Strapi is as easy as installing the package:

```sh
# Using Yarn
yarn add @strapi/plugin-sentry

# Or using NPM
npm install @strapi/plugin-sentry
```

Then, you'll need to link Strapi to your Sentry project. Find your [data source name (DSN)](https://docs.sentry.io/product/sentry-basics/dsn-explainer/) on your Sentry app. 

Then, enter that DSN in your app's `config/plugins.js` file.

```js
module.exports = ({ env }) => ({
  // ...
  sentry: {
    enabled: true,
    config: {
      dsn: env('SENTRY_DSN'),
    },
  },
  // ...
});
```

That's it, restart your app and you're good to go. All your errors will now be logged on Sentry!

Now, let’s take a look at how we can use this plugin in a real-world application. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/cdlvRTCbHB4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Find the plugin on GitHub

We want to make Strapi the most customizable and open CMS. That’s why you can find [this plugin’s source code on GitHub](https://github.com/strapi/strapi/tree/master/packages/plugins/sentry). There, you’ll find all the documentation you need to adapt or extend the plugin to suit your needs.

You can give us your feedback using GitHub issues, or by reaching out [on Twitter](https://twitter.com/strapijs). And your contributions are always welcome, so don’t hesitate to submit a pull request. We’ll be happy to review it!

