将数据传递到具有不同数据结构但命名字段相同的GatsbyJS模板
将数据传递到具有不同数据结构但命名字段相同的GatsbyJS模板
提问于 2018-08-21 00:36:08
我正在使用GatsbyJS中的markdown文件和Python notebook，我需要一种方法来将两种不同文件类型的边缘传递到组件中。目前我得到的错误是有一个重复的“edge”声明，所以在这里设置属性时，有没有一种方法可以区分notebook边缘和markdown边缘：
const {
pathContext: { category },
data: {
allMarkdownRemark: { totalCount, edges },
site: {
siteMetadata: { facebook }
},
allJupyterNotebook: { edges }
}
} = props;我们的目标是为notebooks和markdown文件设置类别页面，但是您可以从GraphQL查询中看到数据的结构不同( notebooks的类别在元数据中，而frontmatter在markdown中。任何关于如何编写这种属性设置的指导都将不胜感激。完整的非工作模板如下所示。
import PropTypes from "prop-types";
import React from "react";
import { ThemeContext } from "../layouts";
import Article from "../components/Article";
import Headline from "../components/Article/Headline";
import List from "../components/List";
const CategoryTemplate = props => {
const {
pathContext: { category },
data: {
allMarkdownRemark: { totalCount, edges },
site: {
siteMetadata: { facebook }
},
allJupyterNotebook: { edges }
}
} = props;
return (
<React.Fragment>
<ThemeContext.Consumer>
{theme => (
<Article theme={theme}>
<header>
<Headline theme={theme}>
<span>Posts in category</span>
{category}
</Headline>
<List edges={edges} theme={theme} />
</header>
</Article>
)}
</ThemeContext.Consumer>
</React.Fragment>
);
};
CategoryTemplate.propTypes = {
data: PropTypes.object.isRequired,
pathContext: PropTypes.object.isRequired
};
export default CategoryTemplate;
// eslint-disable-next-line no-undef
export const categoryQuery = graphql`
query NotebooksAndPostsByCategory($category: String) {
allMarkdownRemark(
limit: 1000
sort: { fields: [fields___prefix], order: DESC }
filter: { frontmatter: { category: { eq: $category } } }
) {
totalCount
edges {
node {
fields {
slug
}
excerpt
timeToRead
frontmatter {
title
category
}
}
}
}
allJupyterNotebook(
filter: { metadata: { category: { eq: $category } } }
) {
edges {
node {
metadata {
title
category
}
}
}
}
}
`;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-21 17:20:09
您可以为edges指定新名称：
在您的示例中，它将如下所示：
const {
pathContext: { category },
data: {
allMarkdownRemark: { totalCount, edges: markdownEdges },
site: {
siteMetadata: { facebook }
},
allJupyterNotebook: { edges: notebookEdges }
}
} = props;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51935100
复制相关文章
相似问题
腾讯云开发者
