显示前 6 篇文章

Posted 2023-03-08

【中文标题】显示前 6 篇文章

【英文标题】：Showing the first 6 articles

【发布时间】：2021-03-29 01:51:25

【问题描述】：

我是盖茨比的新手。 所以我想显示在 WordPress 中发表的前 6 篇文章 这是我的组件内容：

import React from 'react';
import graphql, StaticQuery from 'gatsby';

const Actualites = () => (
    <StaticQuery query=graphql`
        allWordpressPost(filter: categories: elemMatch: name: eq: "Actualités") 
            edges 
                node 
                    date
                    title
                        tags 
                            name
                        
                        categories 
                            name
                        
                        featured_media 
                            source_url
                        
                    
                
            
        `
     render=data =>
                 
                     return (
                         <div className="itemList">
                            <ul>
                                data.allWordpressPost.edges[0].node.map(
                                    prop => 
                                        return(
                                            <li className="itemNews">
                                                <span>prop.date</span>
                                                data.allWordpressPost.edges[0].node.tags.map(
                                                    prop => 
                                                        return(
                                                            <span>prop.name</span>
                                                        )
                                                    
                                                )
                                                data.allWordpressPost.edges[0].node.featured_media.map(
                                                    prop => 
                                                        return(
                                                            <div className="itemImage">prop.source_url</div>
                                                        )
                                                    
                                                )
                                                <div className="itemTitle">
                                                    prop.title
                                                </div>
                                            </li>
                                        )
                                    
                                )

                            </ul>
                         </div>
                     )
                 
    />
);

export default Actualites;

我收到以下错误：

TypeError: data.allWordpressPost.edges[0].node.map is not a function

所以我想知道如何去做。 另外，如何递增，只显示最近的 6 篇文章？

谢谢你！！！

【参考方案1】：

data.allWordpressPost.edges[0] 是您的第一篇文章，因为您的数据存储在节点内部，因此您无法映射它。首先，如果您想要前 6 个帖子，您需要添加 limit GraphQL 选项：

graphql`
        allWordpressPost(
           filter: categories: elemMatch: name: eq: "Actualités", 
           limit: 6) 
            edges 
                node 
                    date
                    title
                        tags 
                            name
                        
                        categories 
                            name
                        
                        featured_media 
                            source_url
                        
                    
                
            
        `

此外，如何递增，使其只有 6 个最近的 显示的文章？

您需要在发布日期之前sort DESC。比如：

allWordpressPost(
    filter: categories: elemMatch: name: eq: "Actualités", 
    limit: 6
    sort:  order: DESC, fields: [date] ) 

更多详情和排序检查Gatsby's GraphQL docs。

查询完 6 篇文章后，您需要遍历它们才能打印出来。

<ul>
  data.allWordpressPost.edges.node.map((article) => 
    return (
      <li className="itemNews">
        <span>article.date</span>
        article.tags.map((prop) => 
          return <span>prop.name</span>;
        )
        article.featured_media.map((prop) => 
          return <div className="itemImage">article.source_url</div>;
        )
        <div className="itemTitle">article.title</div>
      </li>
    );
  )
</ul>;

我已将可迭代变量重命名为 article 而不是 prop，因为它更具可读性。因此，在每个循环中，您都在打印每篇文章。在主循环内部，只需要遍历article就可以得到tags和featured_media。

你的最终代码：

const Actualites = () => (
  <StaticQuery
    query=graphql`
      
        allWordpressPost(
          filter:  categories:  elemMatch:  name:  eq: "Actualités"    ,
          limit: 6,
          sort:  fields: [date], order: DESC 
        ) 
          edges 
            node 
              date
              title
              tags 
                name
              
              categories 
                name
              
              featured_media 
                source_url
              
            
          
        
      
    `
    render=(data) => 
      return (
        <div className="itemList">
          <ul>
            data.allWordpressPost.edges.node.map((article) => 
              return (
                <li className="itemNews">
                  <span>article.date</span>
                  article.tags && article.tags.map((prop) => 
                    return <span>prop.name</span>;
                  )
                  article.featured_media && article.featured_media.map((prop) => 
                    return (
                      <div className="itemImage">article.source_url</div>
                    );
                  )
                  <div className="itemTitle">article.title</div>
                </li>
              );
            )
          </ul>
          ;
        </div>
      );
    
  />
);

export default Actualites;

我添加了一个控件来检查是否有帖子没有tags (article.tags && article.tags.map) 或featured_media (article.featured_media && article.featured_media.map)。如果您将 Babel 配置为编译它，您可以通过 article?.tags?.map 添加一个可选的 ECMAScript 2020 链接功能以用更少的代码实现相同的功能。

【讨论】：

@anohjp 检查一切是否正确关闭。在我的代码中是。

一切都已正确关闭

此代码产生以下错误：TypeError: can't access property "map", data.allWordpressPost.edges.node is undefined

在 |localhost:8000/___graphql` 中检查您的查询。如果没有您的数据结构，就不可能知道结果会是什么。我添加了一种解决方法来帮助您解决问题，而不是简单地复制粘贴代码。

真的很抱歉打扰你......也非常感谢你给我的帮助......否则我在第一次发帖后就已经测试过了。 graphql 中的代码产生了很好的结果。