Gatsby 和 GraphQL - 如何在查询中过滤数组

Posted 2023-03-08

【中文标题】Gatsby 和 GraphQL - 如何在查询中过滤数组

【英文标题】：Gatsby and GraphQL - How to Filter Array Within Query

【发布时间】：2018-04-14 08:50:42

【问题描述】：

我开始使用 Gatsby 和 GraphQL 来返回一个查询，其中列出了属于特定类别的所有画廊。在此示例中，该类别称为“生活方式”。这一切都成功了，我得到了一个包含该类别中所有画廊的数组。我还需要根据名为“日期”的子字段对该数组进行排序。这可以通过 GraphQL 查询本身来实现吗？我尝试将(sort: fields: [date], order: DESC ) 添加到画廊字段，但没有奏效。

关于如何实现这一点的任何想法，或者这是否尽可能接近 GraphQL 可以让我满足我的需求？

提前感谢您的帮助。仍在尝试围绕 GraphQL。

瑞恩

Example of my current query

【参考方案1】：

您能否提供有关您的内容模型的更多详细信息？

如果您在内容中使用“参考”字段，据我所知，目前无法使用该插件。 如果您使用“短文本，列表”字段，如默认示例中的标签。

使用默认示例，您可以执行以下查询：

    
          allContentfulPost(filter:tags:eq:"fantasy", sort:fields:[date], order:DESC) 
            edges 
              node 
                title 
                  childMarkdownRemark 
                    html
              
            
            slug
            date
          
        
      
    

它会给你以下结果：

    
      "data": 
        "allContentfulPost": 
          "edges": [
            
              "node": 
                "title": 
                  "childMarkdownRemark": 
                    "html": "<p>Disney Movie</p>"
                  
                ,
                "slug": "down-the-rabbit-hole",
                "date": "2017-11-26"
              
            ,
            
              "node": 
                "title": 
                  "childMarkdownRemark": 
                    "html": "<p>Old book</p>"
                  
                ,
                "slug": "down-the-rabbit-hole-2",
                "date": "1865-11-26"
              
            
          ]
        
      
    

【讨论】：

哇，好吧。是的，我当前的内容模型有两种类型：图库和类别。我使用 Gallery 内容类型中的参考字段将其与给定类别相关联。由于这个项目还处于早期阶段，我可以根据您的示例切换到使用常规文本字段并试一试。似乎引用字段将是“正确”的方法，但如果它是 gatsby-source-contentful 插件的限制，那很好。只要我以正确的顺序获得所需的数据，我就会很高兴。

意识到您可能已经解决了这个问题，但您也可以考虑在从 GraphQL 获取数据后在 javascript 中进行排序。它并不总是正确的方法，但在某些情况下可能有用。 Lodash / underscore 具有 _.sortBy() 功能，使其非常容易。

【参考方案2】：

我在尝试从我在 Contentful 中使用的类别标签中对帖子进行排序时遇到了同样的问题。正如@chmac 所说，您可以使用 Javascript 对 GraphQL 中的数据进行排序。

我不得不搜索一个很好的例子，但我终于在这个 Gatsby starter 中找到了一个：

Github：https://github.com/ryanwiemer/gatsby-starter-gcn/blob/master/src/templates/tag.js

实时示例：https://gcn.netlify.com/tag/fancy/

您可以在源文件中看到，他们使用moment (https://www.npmjs.com/package/moment) 和lodash 对名为posts 的新常量中的数据进行了排序。在我个人的例子中，我不得不像这样调整我的常量：

const courses = orderBy(
            this.props.data.contentfulCategory.course,
            // eslint-disable-next-line
            [object => new moment(object.createdAt)],
            ['desc']
          )

然后我只是在组件返回中使用了这样的映射函数：

/* Courses */
courses.map(course => (
    <div className="hero__profile" key=course.id>
        <h2>course.title</h2>
    </div>
))

我希望这会有所帮助！