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

Question

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

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

目标是为笔记本和 markdown 文件设置类别页面，但您可以从 GraphQL 查询中看到数据的结构不同（类别在笔记本的元数据中，而在 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
          }
        }
      }
    }
  }
`;

Answer 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;

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

Passing data to GatsbyJS template with different data structures but same named field

reactjs

graphql

jupyter-notebook

gatsby