Webinar

“Digging into Gatsby 5’s Slice API” Register now

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Dialoguewise

Gatsby source plugin for Dialoguewise CMS

This is a Gatsby source plugin for building websites using Dialoguewise as a data source.

Install

npm install --save gatsby-source-dialoguewise

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-dialoguewise`,
      options: {
        accessToken: "Provide your access token.",
        dialogues: [
          {
            slug: "Provide the slug",
            isPilot: false,
            //Any variables you need to pass. This is optional.
            variableList: {
              "@variable-name": "variable value",
            },
          },
        ],
      },
    },
  ],
};

How to query

You can query dialogue nodes like the following:

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

To filter by the slug you specified in the config:

{
  allDialogueWise(filter: { slug: { eq: "Your slug name" } }) {
    edges {
      node {
        slug
        content
        error
      }
    }
  }
}

Example usage

The following example demonstrates how you can fetch contents and display them in your Gatsby app. For more details, please check out the sample application in gatsby-test-app folder

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

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

      {data.allDialogueWise.edges.map((node, index) => {
        //The node.content will now contain your content.
      })}
    </div>
  );
}

export const query = graphql`
  query {
    allDialogueWise(filter: { slug: { eq: "Provide your slug" } }) {
      edges {
        node {
          content
          slug
          error
        }
      }
    }
  }
`;
© 2022 Gatsby, Inc.