If you have a growing web application and are on the lookout for better tools to maintain structured content, why not use Scrivito for this? Equipped with a RESTful API, Scrivito can act as a headless CMS towards your app, and at the same time offer you a UI for maintaining all kinds of content.

In this tutorial, we are going to illustrate how Scrivito-managed content can be accessed from within a Gatsby app using Scrivito’s RESTful API. Gatsby is a React-based web application framework with a close attention to CMSs able to act as content providers. Though, almost needless to say, any app built with any web application framework can consume Scrivito-based content. You will require a Scrivito CMS as well as a Scrivito app, e.g. our Example app, to follow along.

First, let’s spend a moment on the content creation and maintenance procedures.

Usually, when using a Scrivito app to deliver a website, most content is created directly on the pages. For this, one would use widgets to be able to edit and arrange the various page components as desired. In a context in which content is seen and treated as data, however, the demand to have it nicely displayed doesn’t exist. All that is needed are simple forms for acquiring and modifying the data.

This is where Scrivito’s flexibility and customizability come in: You can create data objects according to your structure requirements and provide a suitable editing configuration for them to enable editors to work with the data.

To illustrate this and prepare the data to be displayed by our Gatsby app later on, let’s begin with defining a simple Product class like we did in our Displaying a Product List from a Search article. Create a folder named Product in the “src/Objs” directory of your Scrivito app and place the following file in it:

To make instances of this class editable, add this editing configuration to the Product subdirectory:

Now that we have a means to create and maintain Product items, we’d like to access them from within a React app. If you don’t have such an app already, setting up Gatsby and a small app for experimenting is almost as easy as setting up the Scrivito Example App.

Next, let’s imagine what having a product list rendered could look like in our Gatsby app:

Let’s dive in and develop our ScrivitoProductList component!

As mentioned above, Scrivito’s REST API lets us perform searches. Since our component requires a list of products to render, the first thing we need to develop is the interface for fetching this list. We will name the function that does this fetchScrivitoObjects and give it one parameter, the name of the Scrivito object class the objects to search for must have.

Note that, to keep it simple, we’ve put the tenantId of the Scrivito CMS we are going to talk with as a constant into the JavaScript file instead of providing it via some config or the environment.

Both fetchScrivitoObjects and the function for actually performing the requests, scrivitoFetch, are asynchronous. In our ScrivitoProductList component we are going to assign the result returned by fetchScrivitoObjects to a state variable to cause the component to update after the search results have become available.

fetchScrivitoObjects first issues the search request and extracts the object IDs from the results array included in the returned JSON data. Then it iterates the object IDs to retrieve and return the respective object data.

For now, this is all we require to build the ScrivitoProductList component. Here we go:

After the component has mounted, we are fetching the products from the Scrivito CMS using fetchScrivitoObjects("Product"). The render method then iterates the product items to output their respective attribute values. You might notice that custom attributes such as title are obviously represented as arrays. The first element of such arrays is the attribute’s type, the second its value.

Are we done? Sure – unless we want the product images to show up. :) But you can already test this in your browser.

Scrivito’s REST API supports fetching the data associated with binaries, e.g. PDF or image data. As our products are equipped with images, let’s render them!

In the Product object class, a product’s image is referenced by an attribute named image. The value of this attribute is the ID of the image object to use.

Analogously to the product list, we’d like to be able to have our images rendered via a component, like so:

To get at the image data the component can work with, we’ll once again provide a function, fetchScrivitoImageBlob, and add it to the “fetchScrivitoObjectData.js” file we’ve introduced above:

fetchScrivitoImageBlob first fetches the CMS object with the passed-in objID. This object’s blob attribute contains the id of the actual blob which is then fetched and returned to be able to obtain the URL of the binary data. This is exactly what we require to render the <img> tag in our ScrivitoImage component:

Now that we have the ScrivitoImage component, we can use it in our ScrivitoProductList component to have the product images displayed:

That was it! You now have a React component, ScrivitoProductList, that renders a list of data objects in the way you to want to present them in your Gatsby app. Additionally, using the ScrivitoImage component, you can even have images displayed!

The above approach was meant to give you an idea of how the content maintained in a Scrivito CMS can be accessed using its REST API. However, our code merely covers the basics. Next to adapting the code so that it fits your needs, the following aspects might be worth thinking about:

• Missing attribute values, e.g. images, should be handled properly using fallbacks.
• By default, the maximum number of hits returned by searches is 10. For fetching further batches, the continuation value included in the search result is available. For details, see the REST API documentation.
• If you want the Product objects in the Scrivito CMS to be displayable as pages using a Scrivito-based app, you can provide a page component for them.

Happy coding!