将数据传递给具有不同数据结构但具有相同命名字段的 GatsbyJS 模板答案

【问题标题】：Passing data to GatsbyJS template with different data structures but same named field将数据传递给具有不同数据结构但具有相同命名字段的 GatsbyJS 模板
【发布时间】：2019-01-26 20:10:18
【问题描述】：

我正在使用 GatsbyJS 中的 markdown 文件和 Python 笔记本，我需要一种方法将两种不同文件类型的边传递到组件中。目前我得到的错误是“边缘”的重复声明，所以在此处设置属性时有没有办法区分笔记本边缘和降价边缘：

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

目标是为 notebook 和 markdown 文件设置类别页面，但您可以从 GraphQL 查询中看到数据的结构不同（类别在 notebook 的元数据中，而对于 markdown 的 frontmatter。任何指导如何编写这种属性设置将不胜感激。完整的非工作模板如下所示。

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
          }
        }
      }
    }
  }
`;

【问题讨论】：

标签： reactjs jupyter-notebook graphql gatsby

【解决方案1】：

您可以为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;

【讨论】：