DEV Community

loading...
Cover image for Add GraphCMS to your Web App

Add GraphCMS to your Web App

Karmasakshi Goyal
Here to talk about the Web.
Originally published at karmasakshi.Medium ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

Angular CLI project example:

// src/environments/environment.ts

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

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
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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 = []; }
Enter fullscreen mode Exit fullscreen mode

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 } }
        }
      )
    }
  }
}`;
Enter fullscreen mode Exit fullscreen mode

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.

Sumran displaying dynamic content from GraphCMS


Cheers!

Discussion (0)