Reactjs 从Gatsby Graphql查询中的数组访问数据
我在这里被难住了。我有一个盖茨比网站即时通讯与netlify cms设置。我有我的配置文件集,我可以从netlify admin中创建页面和小部件。当我运行graphql查询时,我可以提取页面信息,但我无法从小部件访问数据 admin/config.ymlReactjs 从Gatsby Graphql查询中的数组访问数据,reactjs,graphql,gatsby,Reactjs,Graphql,Gatsby,我在这里被难住了。我有一个盖茨比网站即时通讯与netlify cms设置。我有我的配置文件集,我可以从netlify admin中创建页面和小部件。当我运行graphql查询时,我可以提取页面信息,但我无法从小部件访问数据 admin/config.yml name: git-gateway branch: master # Branch to update (optional; defaults to master) media_folder: "src/images" # Medi
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
media_folder: "src/images" # Media files will be stored in the repo under static/images/uploads
collections:
- name: "pages"
label: "Page"
folder: "src/markdown-pages"
create: true
fields:
- {label: "Title", name: "title"}
- {label: "Content", name: "content"}
- {label: "Slug", name: "slug"}
- {label: "Path", name: "path"}
- label: "Page Sections"
name: "sections"
widget: "list"
types:
- label: "Call To Action"
name: "calltoaction"
widget: object
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Content", name: "content", widget: "markdown", required: false}
- {label: "Call to Action Link", name: "link", widget: "string", required: false, hint: "Call to Action Link"}
- {label: "Call to Action Text", name: "buttontext", widget: "string", required: false, hint: "Call to Action Text"}
- label: "Services"
name: "services"
widget: object
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Content", name: "content", widget: "markdown", required: false}
gatsby-node.js
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions;
const pageTemplate = path.resolve('src/templates/page.js');
return graphql(`{
allMarkdownRemark {
edges {
node {
id
frontmatter {
title
path
sections {
buttontext
content
link
title
}
}
}
}
}
}`)
.then(result => {
if (result.errors) {
result.errors.forEach(e => console.error(e.toString()))
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({node}) => {
createPage({
path: node.frontmatter.path,
component: pageTemplate,
context: {
id: node.id,
}
})
})
})
}
pagetemplate.js
import Helmet from 'react-helmet'
import Layout from "../components/layout"
//import CTA from '../components/sections/CTA-section'
export default function Template({ data }) {
const {markdownRemark: page} = data
return (
<Layout>
<h1>{page.frontmatter.title}</h1>
<p>{page.frontmatter.sections.title}</p>
// <CTA />
</Layout>
)
}
export const pageQuery = graphql`
query pageByPath($id: String!) {
markdownRemark(id: { eq: $id } ) {
id
frontmatter {
path
title
sections {
title
buttontext
content
link
}
}
}
}
`
从“反应头盔”导入头盔
从“./组件/布局”导入布局
//从“../components/sections/CTA section”导入CTA
导出默认函数模板({data}){
常量{markdown备注:第}=数据
返回(
{page.frontmatter.title}
{page.frontmatter.sections.title}
//
)
}
export const pageQuery=graphql`
查询pageByPath($id:String!){
markdownmark(id:{eq:$id}){
身份证件
前沿物质{
路径
标题
部分{
标题
按钮文字
内容
链接
}
}
}
}
`
GraphiQL屏幕截图
附加问题:我还需要弄清楚如何为这些小部件制作组件。从pagetemplate.js中的注释行可以看出,我想为每个小部件创建单独的组件。由于数据是动态的,我不认为我将能够使用StaticQuery,并且我不能对相同的数据进行另一个页面查询,因为它将被导入 “无法从小部件中提取数据”到底是什么意思?是“小部件”吗?有什么问题?没有这些信息,我们就无法给出有用的答案。请编辑您的问题。@EliteRaceElephant我的标记文件已显示。“widgets”是md文件(“调用操作”和“服务”)中标识的页面部分。当我尝试使用“page.frontmatter.sections.title”从graphql查询访问数据时,不会显示任何数据。不确定如何更好地解释该问题。