Add GraphCMS to your Web App

I talk about GraphCMS — a headless CMS; and how to add it to your web app.

Introduction

Content often needs maintenance. By integrating a headless CMS like GraphCMS, you can offload content management and focus on delivering the content.

GraphCMS has some great features that you will appreciate:

• It is GraphQL-based, so it solves the problem of under-fetching and over-fetching

• It caches your content to over 190 locations around the globe for faster delivery

• It supports roles so you can choose to give full or limited control to teammates

• It allows you to transform your image content during fetching for optimised delivery

• It has an interactive API playground to test your queries and mutations

• It has a generous, free-forever tier

Installation

Once you are done creating your project and a schema to begin with in GraphCMS, go to “Settings > API Access” page of your project and generate a new token for “Content API Access”. Copy this and the “Endpoint URL” to your web app’s environment files. Next.js example:

// .env.local

GRAPHCMS_ENDPOINT=https://api-xxx.graphcms.com/v2/xxx
GRAPHCMS_TOKEN=xxx.xxx.xxx

Angular CLI project example:

// src/environments/environment.ts

export const environment = {
  graphcmsEndpoint: 'https://api-xxx.graphcms.com/v2/xxx',
  graphcmsToken: 'xxx.xxx.xxx'
};

Caution: Do not forget to add these environment variables to your deployment system (Vercel / Netlify / elsewhere).

To send GraphQL queries and mutations, you can opt to use a library instead of forming these requests yourself. graphql-request is a good, lightweight option.

// Command

npm i graphql-request graphql

Set-up graphql-request to include GraphCMS token in authorization header of every request:

// Anywhere

import { GraphQLClient } from 'graphql-request';

const graphcmsEndpoint: string = ENVIRONMENT.GRAPHCMS_ENDPOINT;
const graphcmsToken: string = ENVIRONMENT.GRAPHCMS_TOKEN;
const headers = { authorization: `Bearer ${graphcmsToken}` };
const graphqlClient = new GraphQLClient(graphcmsEndpoint, { headers });

Once you’ve tested a query in GraphCMS’s interactive playground, you can paste it into your web app and make the request:

// Anywhere

import { gql, GraphQLClient } from 'graphql-request';

let products: Product[] = [];

const getProductsQuery = gql`{
  products(where: { isAvailable: true }) {
    rate
    name
  }
}`;

try {
  const getProductsResponse: { products: Product[] } = await graphqlClient.request<{ products: Product[] }>(getProductsQuery);
  products = getProductsResponse.products;
} catch { products = []; }

To transform image content, add the necessary transformations to the query like so:

// Anywhere

import { gql } from 'graphql-request';

let informationCards: InformationCard[] = [];

const getInformationCardsQuery: string = gql`{
  informationCards {
    id
    image {
      url (
        transformation: {
          image: { resize: { fit: crop, height: 800, width: 800 } }
        }
      )
    }
  }
}`;

That’s it! You can see GraphCMS in action on a simple farm-produce pricing web app I made called Sumran: https://sumran.in. Because I’m using Next.js to prerender the content, you won’t see the requests go out on the client. The source is open: https://github.com/karmasakshi/sumran.

---

Cheers!