Next.js: fetching data from GraphCMS

What was I looking for in a CMS provider?

  • The price: I did want to pay for any subscription before being sure that I felt comfortable using the CMS. For this reason, I need a CMS that gave the option to start from a cheap plan at first instance. GraphCMS offers a free plan where you can experiment.
  • Excellent UX: GraphCMS highlights every concept since the first time you sign into. Helping you to understand those that you are doing.
  • High-quality documentation: the platform is plenty of links to documentation, examples and community. And there is a kind of chatbox where you can ask any doubt to the GraphCMS staff. But not only the conceptual documentation of how the CMS works is well written; the technical documentation is also very important for me.
  • Easy querying through the API: GraphQL simplifies the most complex query with its human-readable syntax.
  • Easy integration with your Next.js project: Next.js has an example in github that is quite easy-going. I did not face any issue adapting the example to my project.
  • Get the images in different sizes: This unexpected feature was like a bonus track that I was not expecting. The better of this feature is you can define the size of the image in the request.
coverImage {
url(transformation: {
image: {
resize: {
fit:clip,
height:400

}
}
})
}

Implementation

  • Create an account in GraphCMS: Creating the account is quite easy. You only need to sign up to the platform with either a Google or Facebook account.
  • Create a project: The next step is to create a project. You have several templates available to not start it from scratch.
Create a project is easy!
  • Get the token to be able to use the API: Go to “Settings → API access” and get the development and production token. You must define the tokens as environment variables in your local and production.
  • Create new content: Create the post you want to publish on your web page. In my case, any content has a tag that specifies the sort of content that belongs to. For example, all the posts of books have the label read-books. In this way, I will filter them by queries in the corresponding request.
  • Integrate the API into the project: Following the step-by-step instructions, you are sure to integrate the API into your project without problem. In my case, I have created a service layer as best practice to decouple the definition from the implementation.
  • Better performance: According to the Next.js documentation, it is better to load content in compilation time instead of performing the request in any paging load. It depends on how recurrent you introduce new content to the CMS. I implement CICD through Vercel that trigger a new compilation any time I commit a change into the project.

In summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Miguel Rúa Gutiérrez

Juan Miguel Rúa Gutiérrez

#Tech #SoftwareArchitect #DevOps #AWS #Terraform #SoftwareDevelopment #Python #Nodejs #Entrepreneurship #juanmiguelrua.com