Add GraphCMS to your Web App
Tags: webdev, showdev, graphql, nextjs
Published: 2021-03-02 10:09:30

> 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](https://graphcms.com), 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:

```yml
// .env.local

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

Angular CLI project example:

```ts
// 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](https://github.com/prisma-labs/graphql-request) is a good, lightweight option.

```bash
// Command

npm i graphql-request graphql
```

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

```ts
// 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:

```ts
// 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:

```ts
// 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.

![Sumran displaying dynamic content from GraphCMS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6qdxjt55pi52vtjszwt.png "Sumran displaying dynamic content from GraphCMS")

---

Cheers!