как использовать Directus с Гэтсби

Как можно использовать данные Directus в getsby.js

Я установил приложение Directus и добавил таблицы и данные / столбцы, но я понятия не имею, как его использовать в gatsby.js, я создал такой шаблон в 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}`)
}
})
})
)
})
}

и у меня есть домашняя страница статический сайт в gatsby.js, как это

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

Как мне вызвать данные Directus в этом файле Гэтсби?

1

Решение

Для каждого элемента в вашей таблице Directus будет создана новая страница на основе src/templates/post.jsx составная часть. Это будет совершенно отдельный набор страниц для IndexPage,

Шаги для получения исходных страниц из Directus очень похожи на шаги для получения исходных страниц из Markdown. Я рекомендую вам прочитать https://www.gatsbyjs.org/docs/adding-markdown-pages/ еще один раз (хотя, похоже, вы читали это, так как ваш gatsby-node.js код выглядит так, как будто он был заимствован оттуда). В posts.jsxвместо того, чтобы запрашивать markdownRemark(frontmatter: { path: { eq: $path } }) Вы хотите запросить allDirectusPost(edges: { node: {id: {eq: $path } } }),

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]