Get contents

Once you have integrated Dialogue Wise, 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.