Headless CMS for Gatsby apps

Gatsby is a React-based, GraphQL powered, static site generator (SSG). With SSGs, the HTML, CSS, JavaScript, and other assets are pre-generated at build-time. By using SSGs like GatsbyJS make it straightforward to pull data via APIs and generate a static Progressive Web Apps (PWA) that’s easy to deploy to any web host. They can also easily be distributed through CDN, creating the fastest possible experience for the users and also making Google happy for SEO purposes.

In this post, we will see how you can use our platform to power the content for your Gatsby site. To get started, you first need to install the Dialoguewise plugin like this:

npm install --save gatsby-source-dialoguewise

Next, you need to configure it in your gatsby-config.js.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-dialoguewise`,
      options: {
        apiKey: 'YOUR_API_KEY',
        emailHash: 'YOUR_EMAIL_HASH',
        dialogues: [
            {
                slug: '[The Slug]',
                isPilot: false,
                //Any variables you need to pass
                variableList: {
                    '@wheel': 2
                },
            },
        ],
      },
    },
  ],
}

Now that you have configured it, you can use GraphQL to query your content.

{
  allDialogueWise {
    edges {
      node {
        slug
        content
        error
      }
    }
  }
}

Here’s an example usage

import React from "react"
import { graphql } from "gatsby"

export default function DwDemo({ data }) {
  return (
    <div>
      <h1>DialogueWise Demo</h1>

      {data.allDialogue.edges.map(({ node }) => (
        JSON.parse(node.content).map( (content, index) => (
            <div key={index} dangerouslySetInnerHTML={{ __html: content['hero-section'] }} />)
        )
      ))}
    </div>
  )
}

export const query = graphql`
query {
  allDialogueWise(filter: {slug: {eq: "home-content"}}) {
    edges {
      node {
        content
        slug
        error
      }
    }
  }
}
`

That’s it! You now have your content displayed on your app. You can also have a look at the sample project available on Github for a better understanding.