Once you have integrated Dialoguewise, you can easily retrieve the contents of a Dialogue and display it on your app. 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.