Lang
Blog

Exploring the Best Headless CMS: A Deep Dive into Strapi CMS

ByJaydeep Lohar
May 22nd . 6 min read

Unleash the power of APIs with Strapi, the open-source headless CMS taking the web development world by storm.

Overview

Strapi is a well known headless CMS in the realm of headless CMS open source solutions. It serves as a pivotal tool for developers aiming to create API-driven digital experiences. Since its inception in 2015, Strapi has evolved into one of the best CMS headless options available, owing to its exceptional flexibility, extensibility, and ease of use.

At its core, Strapi epitomizes the essence of a headless content management system, empowering developers to seamlessly integrate their frontend with its robust Strapi Back-End API. This integration is facilitated by Strapi's flexible content architecture, enabling developers to effortlessly define custom content types and establish relationship mappings.

Why Choose Strapi as Your Headless CMS Solution?

  • Flexibility: Strapi offers unparalleled flexibility in content architecture, allowing developers to effortlessly define custom content types and establish intricate relationship mappings to suit specific project needs, making it an ideal choice for those seeking a versatile headless CMS solution.

  • Open Source: Strapi's open-source nature not only makes it freely accessible but also fosters a vibrant community of developers who contribute plugins, extensions, and improvements, enriching its ecosystem. This community-driven approach ensures that Strapi can be customized to fit unique project requirements while benefiting from ongoing headless CMS open-source enhancements.

  • Ease of Use: Featuring an intuitive admin panel, Strapi empowers non-technical users such as content editors and administrators to manage content, users, permissions, and settings without needing to write any code. This accessibility makes it an ideal choice for teams with diverse skill sets seeking a user-friendly headless content management system.

  • Customization and Extensibility: Strapi's extensive customization capabilities allow developers to extend its functionality through plugins and custom code, enabling tailored solutions that meet specific business needs without reinventing the wheel. This flexibility makes Strapi a preferred choice for those looking to create powerful and unique digital experiences using a headless CMS.

  • Security: With built-in security features such as role-based access control (RBAC), user authentication, and data validation, Strapi ensures the safety of data and user interactions, making it an ideal choice for building secure applications. This focus on security reinforces Strapi's reputation as a reliable and trustworthy headless CMS platform.

The following are below points as an enhancement in strapi v5, to solve the challenges being faced in strapi v4

Draft & Publish functionality

  • In strapi v5 the draft and publish functionality, is improved with.
  • Making it safe to prevent the draft changes from making it live

strapi1.jpg

  • Webpack is being replaced by vite bundling making it faster for build process and backend development

Document Service API

  • It is a query executing API
  • As in v4, there was query engine API, working over the low-level database query, not aware of complex data structures like components, sections
  • So to solve the above issue in v5 Document service API is introduced
  • Basically, every record that is been created in any table is a document, with a unique document ID, on the basis of documentId create, find, update, delete operation are executed
  • By default, it’s status will be in the draft
  • Below Create query
await strapi.documents('api::store.store).create({
data: 
{
  name: ‘store A’
 }
})

Response

{
  documentId: "ln1gkzs6ojl9d707xn6v86mw",
  name: "store A",
  publishedAt: null,
  locale: "en",
}
  • To update the status to publish, run the below query
await strapi.documents('api::store.store).publish
({
documentId: ‘ln1gkzs6ojl9d707xn6v86mw’,
});
  • For auto-publish while creating document execute the below query
await strapi.documents('api::store.store).create
({
   data:
   {
     name: "New Restaurant",
    },
    status: 'published',
})
  • For unpublishing a document, below query
await strapi.documents('api::store.store).unpublish
({
   documentId: 'a1b2c3d4e5f6g7h8i9j0klm' 
 });
  • For Discarding draft data and overriding it with the published version, execute the below query
strapi.documents.discard
({
   documentId: 'a1b2c3d4e5f6g7h8i9j0klm', 
 });
  • To count only published document, execute the below query
strapi.documents('api::store.store).count
({ status: 'published' })
  • Similarly on the basis of the above document Find, FindMany, update, and delete document is also executed.

GraphQL API

Strapi being a headless cms open source, as In v5 a web interface for graphQL , is being introduced served over /graphQL route.

strapi2.jpg

Query syntaxes to fetch data over graphQl interface

  • Query to fetch a specific document
{
  restaurant(documentId: "a1b2c3d4e5d6f7g8h9i0jkl")
  {
   name
   description
 }
}
  • Query syntax to fetch draft version of a document
query Query($status: PublicationStatus)
{
  restaurants(status: DRAFT) 
  {
    documentId
    name
    publishedAt # should return null
   }
}
  • Query syntax, to fetch published version of document
query Query($status: PublicationStatus) 
{ 
 restaurants(status: PUBLISHED)
 {
   documentId
   name
   publishedAt
  }
}

Mutations in GraphQL

-Syntax for Creating a new document, using mutation

mutation CreateStore($data: StoreInput!) 
{
  createStore(data: 
  {
    name: "krofers grocery"
   }) 
  {
   name
   documentId
  }
}
  • Syntax for Updating a document using mutation
mutation UpdateStore($documentId: ID!, $data: StoreInput!) 
{
  updateRestaurant(
  documentId: "bf97tfdumkcc8ptahkng4puo",
  data: { name: "aliance grocery" }
   )
   {
      documentId
      name
    }
 }

-Syntax for Deleting a document using mutation

mutation DeleteRestaurant 
{
  deleteRestaurant(documentId: "a1b2c3d4e5d6f7g8h9i0jkl") 
  {
    documentId
   }
}

Mutation on media files

  • Update an uploaded media file
mutation Mutation($updateUploadFileId: ID!, $info: FileInfoInput) 
{
  updateUploadFile(
  id: 3,
  info: 
  {
    alternativeText: "New alt text"}) 
{
   documentId
   url
   alternativeText
}
}
  • Delete an uploaded media file
mutation DeleteUploadFile($deleteUploadFileId: ID!) 
{
 deleteUploadFile(id: 4) {
 documentId # return its documentId}
 }

REST API

In strapi v5 the content API format has been flattened, which means attributes are no longer nested in data.attributes object and are directly accessible at the first level of the data object. For example: ‘title’ attribute is accessed with data.title.

The following below are basic CRUD REST API Operations, with their syntax

  • GET list of document inside a collection

    GET - http://localhost:1337/api/{{collection-name}}

  • GET a specific record on basis of documentId

    GET - http://localhost:1337/api/{{collection-name}}/{{documentd}}

  • CREATE a record

    POST - http://localhost:1337/api/{{collection-name}} Request-Body:-

{ 
   "data": {
    "Name": "Store A",
    “Type” : “Grocery”
   }
}

  • Update a record

    PUT - http://localhost:1337/api/{{collection-name}}/{{documentd}} Request-Body:-

{ 
  "data": {
   "Name": "Store A",
    “Type” : “Garments”
  }
}

  • Delete a record

    DELETE - http://localhost:1337/api/{{collection-name}}/{{documentd}}

Currently, as strapi v5 is in beta release so migration is not recommended by strapi community as soon as the stable v5 is release. Prior to it, as per strapi v5 documentation reference. Migration tool is going to be developed, by strapi community for the migration part.

Breaking changes

Content-API

  • In Strapi 5 , response are flattened format for API calls, they are not sub-nested
  • documentId should be used instead of id in API calls
  • The publicationState parameter is not supported and replaced by status
  • The Graph-QL API has been updated
  • The Entity service API is deprecated and replaced by the Document Service API
  • Lifecycle hooks are triggered differently based on Document Service API methods

Database

  • mySQL is not supported in strapi 5
  • Database identifiers can’t be longer than 55 characters

Dependencies

  • Vite is the default bundling tool, in strapi 5
  • Strapi 5, uses react-router-dom v6
  • Strapi 5 uses koa-body v6

Conclusion

In conclusion, Strapi stands out as the premier choice for developers seeking a flexible, scalable, and secure platform for crafting API-driven applications and content management systems. Its robust features, including customization, ease of use, and built-in security, make it the go-to headless CMS solution for delivering innovative digital experiences with efficiency and confidence. With Strapi, developers can unlock unparalleled flexibility and extensibility, ensuring their projects are equipped to meet evolving demands and stand out in today's dynamic digital landscape.

Share:
0
+0