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

时间:2018-08-20 16:36:08

标签: reactjs jupyter-notebook graphql gatsby

我正在使用GatsbyJS中的markdown文件和Python笔记本,并且我需要一种将两种不同文件类型的边缘传递到组件中的方法。目前我得到的错误是存在一个重复的“ edges”声明,因此在此处设置属性时有没有办法将笔记本边缘与markdown边缘区分开来:

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

1 个答案:

答案 0 :(得分:0)

您可以为SELECT date_trunc('month', p.payment_date) as pay_mon, fullname, count(p.payment_date) as pay_countpermon, pay_amount FROM payment p JOIN customer c ON p.customer_id=c.customer_id, (SELECT c.first_name||' '||c.last_name as fullname, sum(p.amount) as pay_amount FROM payment p JOIN customer c ON p.customer_id=c.customer_id GROUP by fullname ORDER BY 2 desc LIMIT 10) t1 GROUP BY 2, 1, pay_amount ORDER BY fullname, pay_amount desc; 分配新名称:

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

在您的示例中,它看起来像:

edges