Community Plugin
View plugin on GitHubDialogue Wise Gatsby Source Plugin
A Gatsby source plugin for sourcing data into your Gatsby application from headless CMS, Dialogue Wise.
Install
npm install --save gatsby-source-dialoguewise
How to use
// 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
},
},
],
},
},
],
}
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: "hero-section" } }) {
edges {
node {
slug
content
error
}
}
}
}
Example usage
This is a sample page.
import React from "react"
import { graphql } from "gatsby"
export default function DwDemo({ data }) {
return (
<div>
<h1>DialogueWise Demo</h1>
{data.allDialogueWise.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
}
}
}
}
`