如何在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如何调用gatsby文件中的直接数据?
发布于 2018-10-10 18:49:04
对于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 } } })。
https://stackoverflow.com/questions/50218760
复制相似问题