社区首页 >问答首页 >将数据传递到具有不同数据结构但命名字段相同的GatsbyJS模板

问将数据传递到具有不同数据结构但命名字段相同的GatsbyJS模板
EN

Stack Overflow用户

提问于 2018-08-20 16:36:08

回答 1查看 126关注 0票数 0

我正在使用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
          }
        }
      }
    }
  }
`;

graphql

gatsby

reactjs

jupyter-notebook

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-21 09:20:09

您可以为edges指定新名称：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names

在您的示例中，它将如下所示：

const {
  pathContext: { category },
  data: {
    allMarkdownRemark: { totalCount, edges: markdownEdges },
    site: {
      siteMetadata: { facebook }
    },
    allJupyterNotebook: { edges: notebookEdges }
  }
 } = props;