Gatsby

Gatsby is a framework for building React websites and apps.

Cosmic makes a great Gatsby CMS for your Gatsby websites and apps.

Before adding any code, make sure to follow the Initial Setup at the top of this page to set up your content in Cosmic. Then take the following steps to add Cosmic-powered content to your Gatsby apps:

1. Install a new Gatsby app#

You can use the Gatsby CLI to install a new Gatsby app that includes tooling and configurations.

npm install -g gatsby-cli
gatsby new cosmic-gatsby-app

2. Install the Cosmic source plugin for Gatsby#

Install the Cosmic source plugin for Gatsby.

cd cosmic-gatsby-app
yarn add gatsby-source-cosmicjs

3. Add the following code into your gatsby-config.js file in the plugins section.#

Find your Bucket slug and API read key in Your Bucket > Settings > API Access after logging in.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-cosmicjs`,
    options: {
      bucketSlug: `YOUR_BUCKET_SLUG`, // Get this value in Bucket > Settings
      objectTypes: [`posts`], // Note it will result in GraphQL queries (allCosmicjsPosts, cosmicjsPosts)
      // If you have enabled read_key to fetch data (optional).
      apiAccess: {
        read_key: `YOUR_BUCKET_READ_KEY`, // Get this value in Bucket > Settings
      },
      localMedia: true, // Download media locally for gatsby image (optional)
    },
  },
];

4. Add the following code into your gatsby-node.js file#

const path = require(`path`);
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  // Get the single post layout file
  const blogPost = path.resolve(`./src/templates/blog-post.js`);
  // Query the GraphQL to get our posts
  const result = await graphql(
    `
      {
        allCosmicjsPosts(
          sort: { fields: [created], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              slug
              title
            }
          }
        }
      }
    `
  );
  if (result.errors) {
    throw result.errors;
  }
  // Create blog posts pages.
  const posts = result.data.allCosmicjsPosts.edges;
  // For each post in posts create a separate page
  posts.forEach((post, index) => {
    createPage({
      path: post.node.slug,
      component: blogPost,
      context: {
        slug: post.node.slug,
      },
    });
  });
};

5. Create blog-post.js in src/templates/ directory and add following code#

This is the layout for a single blog post page which we used in gatsby-node.js

import React from "react";
import { graphql } from "gatsby";
const BlogPostTemplate = ({ data }) => {
  const post = data.cosmicjsPosts; // get the post data from query
  // Render the post data
  return (
    <article>
      <h1>{post.title}</h1>
      <small>{post.created}</small>
      <div>
        <img alt="" src={`${post.metadata.hero.imgix_url}?w=400`} />
      </div>
      <section dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
};
export default BlogPostTemplate;
// Query to get single Post where slug is equal
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    cosmicjsPosts(slug: { eq: $slug }) {
      id
      content
      title
      metadata {
        hero {
          imgix_url
        }
      }
      created(formatString: "MMMM DD, YYYY")
    }
  }
`;

6. Edit index.js file in src/pages/ directory and add following code#

import React from "react";
import { Link, graphql } from "gatsby";
const BlogIndex = ({ data }) => {
  const posts = data.allCosmicjsPosts.edges; // getting all posts from query
  // Rendering list of posts with link to their url
  return (
    <div>
      {posts.map(({ node }) => {
        return (
          <div key={node.slug}>
            <Link to={node.slug}>
              <h3>{node.title}</h3>
              <img alt="" src={`${node.metadata.hero.imgix_url}?w=400`} />
            </Link>
          </div>
        );
      })}
    </div>
  );
};
export default BlogIndex;
// Query all posts from GraphQL
export const pageQuery = graphql`
  query {
    allCosmicjsPosts(sort: { fields: [created], order: DESC }, limit: 1000) {
      edges {
        node {
          slug
          title
          metadata {
            hero {
              imgix_url
            }
          }
          created(formatString: "DD MMMM, YYYY")
        }
      }
    }
  }
`;

7. Start your app#

Start your app, and go to http://localhost:8000. Dance 🎉

 yarn develop