Sanity.io is a Headless CMS that provides your content as data over an API to any platform or device. Currently, the quickest way to deal with the backend is using such CMS like Sanity, and it makes life easier for all trendy content creators who want to build things effectively and efficiently.

If you heard something about the JAMstack (JavaScript, API, Markup) and want to develop your next project by the API only, then Sanity will be the best companion!

However, The good news is they are in position 6 based on CMS usage vs. satisfaction, let’s take a look here: https://jamstack.org/survey/2021/#choices

Installation:

npm install -g @sanity/cli: their entire command line will be installed in a second
sanity init: creating a local project by downloading the Sanity Studio

Four basic sanity commands:

  • sanity docs: to open the sanity documentation in a browser
  • sanity manage: to open the project settings in a browser
  • sanity help: to explore the CLI manual
  • sanity start: to run your studio
By running sanity start in the project folder, your CLI will open a local server with hot-module reloading so you can configure it without having to refresh the browser manually.

Sanity Studio:

Sanity Studio is a studio for creating efficient data-driven content applications. It’s a headless real-time CMS, which means, you will get access to your content instantly and can use it by the query in the API. Another good side of this is you can entirely customize your studio with JavaScript and React.

However, there are preconfigured templates to get started, but it’s so easy to configure the Sanity Studio, take a look:

export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string'
    }
  ]
}

The result will be this:
sanity studio

Sanity Content Lake:

Sanity Content Lake is a database where all your content is stored, and all this stored data is completely managed and controlled in the cloud. You can access this lake via Sanity API, either by using these client libraries or directly via the HTTP API.

Query data with GROQ

GROQ (GRaph Oriented Query language) is Sanity’s open-source query language. It is a declarative language designed to query collections for largely schema-less JSON documents. You can query the documents with the API using GROQ.

The good sides of this language are expressive filtering, entering several documents into a single response, and shaping the response to fit the client application. Here let’s take a look at the different ways to write GROQ:

sanity documents query "*[_type == 'post']"
by using CLI

client.fetch("*[_type == 'post']").then(documents => console.log(documents))
by using frontend

https://<yourProjectId>.api.sanity.io/v1/data/query=*[_type == "post"]
by using browser

Data Migrating:

The whole point of such CMS is that it should be simple for you to migrate, duplicate, and move your data. Especially if you want to use it for production, you should have an easy way of duplicating that content into an environment where you can test and experiment.

In Sanity, it’s easy to export all your content and assets in a neat ndjson-file (and a folder with all your assets), and there are two workflows for doing this either by using CLI or by export API:

sanity dataset export <datasetName>
Export dataset by CLI

sanity dataset import datasetExport.ndjson
Import dataset by CLI

https://<yourProjectId>.api.sanity.io/v1/data/export/<datasetName>
Export dataset by API

Final Words:

So that’s all the basic understanding of this Sanity CMS, though there’s a lot more to explore and you can do it by just getting started on your next project with Sanity. Anyways, just for the sake of exploring new staff, I had done one project called Clicks, a social media app created with React and Sanity. I enjoyed doing this and learned a lot: here is the project link: https://rdc-clicks.netlify.app/

Do projects • learn technologies • share knowledge!

Happy Coding 🙂