как использовать Directus с Гэтсби - PullRequest
Новая
       12

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

0 голосов
/ 07 мая 2018

Как можно использовать данные 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 Ответ

0 голосов
/ 10 октября 2018

Для каждого элемента в таблице 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 } } }).

...