Using Seams-CMS with GastsbyJS

banner

As you might have read before, this blog uses Seams-CMS together with GatsbyJS to generate a static site from our blog content. In this post, we tell you how we managed this and give you some ideas on how you can create your own static site with Seams-CMS and GatsbyJS.

Note that this is not a tutorial per se, but gives you some ideas on how to implement this yourself. We assume you are already familiar with GatsbyJS and have generated a new site through the gatsby new command. If not, take a look at the GatsbyJS Documentation for more information.

First, we need to have some kind of content that we want to show. Because of the dynamic nature of Seams-CMS, you can use whatever content you like. Even though they will differ for each blog or site, the way on how to fetch the data form Seams-CMS is the same. In our case, we have blog posts and categories which we will be fetching from Seams-CMS and store it inside the GraphQL data layer of GatsbyJS. From this point, we can do whatever we want with the data: create blog pages, generate paginated indices, send data to Algolia for quick search options etcetera.

Loading data into GatsbyJs

Data in GatsbyJS gets loaded through source plugins. We have written such a plugin for you to use so all you need to do is install it:

         npm install seams-cms-gatsby-source

         # Or if you use yarn:
         yarn add seams-cms-gatsby-source

Once installed, we can configure the plugin to tell it what it needs to download. Open your gatsby-config.js file in the root of your project and add the following:

       plugins: [
         {
           // Seams CMS data fetcher
           resolve: 'seams-cms-gatsby-source',
           options: {
             apiKey: API_KEY,
             workspace: WORKSPACE,
             contentTypes: ['blogpost', 'category'],
          },
       }
     ]

Note that API_KEY and WORKSPACE should come from your own Seams-CMS account. Inside the contentTypes array, we define which content types we want to download from SeamsCMS into GatsbyJS. This should also map to the names of your content type (api-id's) that you will be using.

Next, run GatsbyJS to populate the data layer.

 gatsby develop 

Running gatsby develop

If all goes well, you can open up your browser and inspect all the data that is currently inside GatsbyJS:

http://localhost:8000/___graphql

You should see entries of allSeamsCmsBlogPost, allSeamsCmsCategory,seamsCmsBlogPostandseamsCmsBlogPost`.

GraphQL overview

Click open the blogposts (or whatever you have called it), and see if you can select the title of your post (which is conveniently called title in our case). This will automatically generate a GraphQL query (which we will need later on). You can run this query and it would output something like this:

Displaying Gatsby's GraphQL interface

Generate pages

Now that we can query our data, we need to generate a query that will fetch all the data we want to use to generate our pages. For now, we generate one single page with all the blog posts on it, but it's fairly trivial to generate a page for each blog post individually.

We will create a template that we will be using for generating our data. Create a file named src/templates/blog-index.js, and add the following:

import React from "react"

import Layout from "../components/layout"

const BlogIndex = ({ pageContext: { blogPosts } }) => (
  <Layout>
    {blogPosts.map((blogPost) => (
        <>
          <h4>Title: {blogPost.node.content.title.value}</h4>
          {/*<p>{blogPost.node.content.content.value}</p>*/}
          <hr />
        </>
    ))}
  </Layout>
)

export default BlogIndex

It fetches blogPosts from the pageContext (we pass our data along with this variable), and we iterate over all the posts. For each post we print the title and optionally the content and whatever you like to add. For instance, at our Seams-CMS blog we also fetch things like tags, categories, author information, snippets, image headers and more.

Once we have created our template, we will be connecting our blog data to the template. We can do this inside the gatsby-node.js in our root directory. Note that we will be needing a GraphQL query that we can generate automatically through the web interface. Select all the fields you want to use in your template and copy/paste the query into the new file:

const blogQuery = `
query {
  allSeamsCmsBlogpost {
    edges {
      node {
        content {
          content {
            value
          }
          slug {
            value
          }
          title {
            value
          }
        }
      }
    }
  }
}
`;

Next, we export a createPages function that will actually create our page (or multiple pages if you want).

const blogQuery = `<your query>`;

exports.createPages = async ({ graphql, actions: { createPage } }) => {
  const query1 = await graphql(blogQuery);

  createPage({
    path: `/blogs`,
    component: require.resolve("./src/templates/blog-index.js"),
    context: {
      blogPosts: query1.data.allSeamsCmsBlogpost.edges,
    },
  });
};

Once the file is completed, GatsbyJS should automatically regenerate your site and it should be available for you to see at http://localhost:8000/blogs:

Final result