Working with Express.js and GraphCMS

Express is a fast, minimalist web framework for Node.js that is used by developers to create web applications, and APIs. While we've seen the huge rise in adoption across the Jamstack, and static site generation, there are still times when you need a server.

If you've used Express before, then the following will be quite familiar.

const express = require('express');

const app = express();

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => console.log(`🚀 Running on port ${PORT}`));

Let's take this typical Express server and adjust it to fetch content from GraphCMS, and display it to the page as HTML.

Let's begin by configuring the app view engine to ejs.

app.set('view engine', 'ejs');

With this set, we can now render a page using a file with the extension .ejs by providing the name of the file to res.render() as the first argument.

Inside the folder views, create the file index.ejs and add the following:

<% products.forEach(function(product) { %>
<a href="/products/<%= product.slug %>">
  <%= product.name %>
</a>
<% }); %>

All we're doing here is creating links to all of our products passed to the page from the server.

To power this view, we'll need to query GraphCMS, and send the data to the page. This is similar to page props if you're coming from a frontend framework such as Next.js.

Inside server.js you'll want to include a GraphQL client we can use to query GraphCMS, and initialize it.

const { AwesomeGraphQLClient } = require('awesome-graphql-client');
const fetch = require('node-fetch');

const client = new AwesomeGraphQLClient({
  endpoint:
    'https://api-eu-central-1.graphcms.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master',
  fetch,
});

Now create a new get route on path / to execute our query, and render our index.ejs template.

app.get('/', async function (_, res) {
  const query = `
    { 
      products {
        name
        slug
      }
    }
  `;

  const { products } = await client.request(query);

  res.render('index', { products });
});

If you start the server, and head to http://localhost:4000 you should see products listed from your project, or our example project if you used the endpoint above.

Now let's create a new function that renders pages for each of our products, that we linked to inside index.ejs.

app.get('/products/:slug', async function (req, res) {
  const query = `
    query ProductPageQuery($slug: String!) {
      product(where: { slug: $slug }) {
        name
        description
        price
      }
    }
  `;

  const { slug } = req.params;

  const { product } = await client.request(query, { slug });

  res.render('product', { product });
});

Then all that's left to do is create the file views/product.ejs and output any of the data we queried to the page!

<h1><%= product.name %></h1>
<p><%= product.description %></p>
<p><%= product.price / 100 %></p>

That's it! You're set to fetch content from GraphCMS, and server render it using Express.js - if you'd like to get going with this same code, you can find this on our examples repo on GitHub, or you can edit with CodeSandbox.

If you'd like to get up and running with the code above, you can clone, or edit on CodeSandbox.