how to use Directus with gatsby - php

Question

How is it possible to use the Directus data in getsby.js
I've setup a Directus app, and added tables and data/columns but I have no clue how to use it in gatsby.js, I have build a template like this in jsx:
const path = require('path')
exports.createPages = ({ boundActionCreators, graphql }, { urlPrefix }) => {
const { createPage } = boundActionCreators
return new Promise((resolve, reject) => {
resolve(
graphql(
`
{
allDirectusPost {
edges {
node {
id
title
author
content
}
}
}
}
`
).then(result => {
if (result.errors) {
console.error('GraphQL query returned errors')
reject(result.errors)
}
result.data.allDirectusPost.edges.forEach(edge => {
try {
let node = edge.node
let path = `posts/${node.id}`
createPage({
path,
layout: 'index',
component: path.resolve('src/templates/post.jsx'),
context: {
post: node,
},
})
console.log(`Generated page '${path}'`)
}
catch (error) {
console.error(`Failed to generate page posts/'${path}': ${error}`)
}
})
})
)
})
}
and I have a homepage static site in gatsby.js like this
import React from 'react'
import Link from 'gatsby-link'
// import postsTemplate from '../templates/post.jsx'
const IndexPage = () => (
<div>
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.000</p>
<p>Now go build something great.</p>
<post />
<Link to="/page-2/">Go to page 2</Link>
</div>
)
export default IndexPage
how do I call the directus data in that gatsby file?

Answer 1

For each item in your Directus table, a new page will be created based off the src/templates/post.jsx component. This will be a completely separate set of pages to the IndexPage.
The steps to source pages from Directus is very similar to the steps to source pages from Markdown. I recommend you read https://www.gatsbyjs.org/docs/adding-markdown-pages/ one more time (though it looks like you did read it, since your gatsby-node.js code looks like it was borrowed from there). In posts.jsx, instead of querying markdownRemark(frontmatter: { path: { eq: $path } }) you want to query allDirectusPost(edges: { node: {id: {eq: $path } } }).