Gatsby - 从 GraphQL 查询中获得的日期字段中提取日期和月份答案

【问题标题】：Gatsby - extracting day and month from date field obtained in GraphQL queryGatsby - 从 GraphQL 查询中获得的日期字段中提取日期和月份
【发布时间】：2021-03-20 04:57:53
【问题描述】：

我是一名新手 Web 开发人员，使用 Gatsby、React、GraphQL 和 Javascript。我正在一个简单的博客网站上工作，其中我有一些降价帖子，其前端动态填充页面上的博客帖子列表。到目前为止，我已经成功地完成了这项工作，但我想知道如何处理从 graphQL 查询中获得的数据。我想以如下所示的风格化方式显示帖子的日期和月份：

我正在使用以下代码来查看降价帖子的日期：

    const data = useStaticQuery(graphql`
    query{
        allMarkdownRemark{
        edges{
          node{
            frontmatter{
              title
              date
              featuredImage{
                  childImageSharp{
                      fluid{
                        ...GatsbyImageSharpFluid
                      }
                  }
              }
            }
            fields{
                slug
              }
          }
        }
      }
    }
    `)

  return(
        <div id="blog">
            <div class="blog-pad"></div>
            <div class="blog-posts">
            
                {data.allMarkdownRemark.edges.map((edge) =>(
                    <div class="blog-post">
                        <Img fluid={edge.node.frontmatter.featuredImage.childImageSharp.fluid} />
                        <div class="meta">
                            <h3>
                                {edge.node.frontmatter.date}
                            </h3> 
                            <div class="title-date">
                                <h3>
                                    <a href={"/blog/" + edge.node.fields.slug}>{edge.node.frontmatter.title}</a>
                                </h3> 
                                <p>{edge.node.frontmatter.date}</p>  
                                <p>Author</p>  
                            </div>
                        </div>    
                        </div>
                ))}
           
            </div>
            <div class="blog-pad"></div>
        </div>
    )

添加一些样式后，结果如下：

如何从{edge.node.frontmatter.date} 中提取日期和月份？我想编写一个 javascript 函数来对其进行一些字符串格式化，但是我不太确定如何编写该函数，也不知道它如何适应 jsx 和 graphQL 的上下文。这个名为const data 的查询是否会作为参数传递给函数，然后该函数将返回一个字符串？返回<p>3 Dec</p>

【问题讨论】：

使用普通的js代码，在jsx之前

标签： javascript reactjs graphql gatsby

【解决方案1】：

您有多种方法可以实现这一目标：

Gatsby 使用momentjs 在GraphQL query using formatString 中动态格式化日期：

  const data = useStaticQuery(graphql`
  query{
      allMarkdownRemark{
      edges{
        node{
          frontmatter{
            title
            date(formatString: "YYYY.MM.DD")
            featuredImage{
                childImageSharp{
                    fluid{
                      ...GatsbyImageSharpFluid
                    }
                }
            }
          }
          fields{
              slug
            }
        }
      }
    }
  }
  `)

您可以在momentjs docs 中查看更多格式详细信息。

如果以前的方法不符合您的要求，您始终可以使用 JavaScript + momentjs 来自 GraphQL 响应来格式化结果：

   const data = useStaticQuery(graphql`
  query{
      allMarkdownRemark{
      edges{
        node{
          frontmatter{
            title
            date
            featuredImage{
                childImageSharp{
                    fluid{
                      ...GatsbyImageSharpFluid
                    }
                }
            }
          }
          fields{
              slug
            }
        }
      }
    }
  }
  `)


const formattedDate= date =>{
  let day, month, year;

  day= moment(date).format("DD");
  month= moment(date).format("MM");
  year= moment(date).format("YYYY");

  return <div>`${year}.${month}.${day}`</div>
}

return(
      <div id="blog">
          <div class="blog-pad"></div>
          <div class="blog-posts">

              {data.allMarkdownRemark.edges.map((edge) =>(
                  <div class="blog-post">
                      <Img fluid={edge.node.frontmatter.featuredImage.childImageSharp.fluid} />
                      <div class="meta">
                          <h3>
                           {formattedDate(edge.node.frontmatter.date)}
                          </h3> 
                          <div class="title-date">
                              <h3>
                                  <a href={"/blog/" + edge.node.fields.slug}>{edge.node.frontmatter.title}</a>
                              </h3> 
                              <p>{edge.node.frontmatter.date}</p>  
                              <p>Author</p>  
                          </div>
                      </div>    
                      </div>
              ))}

          </div>
          <div class="blog-pad"></div>
      </div>
  )

您可以使用moment(yourDateHere).format(yourFormatHere) 将任何日期格式化为所需格式。使用这种方法，您将能够自定义更多的输出和样式，添加 HTML 标记或删除日期之间的空格。

【讨论】：

一个通知 - moment(day) 被多次调用......而formattedDate fn 应该只返回一个字符串，以便更可重用

【解决方案2】：

这可以通过定义一个在 JSX 之外进行简单字符串格式化的函数来完成。然后，您可以在花括号 {myFunction(parameter)} 中调用您的函数，将 graphQL 查询数据作为参数传递给此函数。

function dayMonth(data){

    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    //split up the string to get the day and month                    
    var month = parseInt(data.slice(5,7));
    var day = data.slice(8,10);

    //remove 0 from 02, 03 etc ... until 10
    if(day[0]=="0"){
        day = day.slice(1,2);
    }

    //concatenate the two together again and return
    var formatted = day + " " + monthNames[month];

    return formatted;
}

const BlogPage = () =>{

    const data = useStaticQuery(graphql`
    query{
        allMarkdownRemark{
        edges{
          node{
            frontmatter{
              title
              date
              featuredImage{
                  childImageSharp{
                      fluid{
                        ...GatsbyImageSharpFluid
                      }
                  }
              }
            }
            fields{
                slug
              }
          }
        }
      }
    }
    `);

    return(
        <div id="blog">
            <div class="blog-pad"></div>
            <div class="blog-posts">
            
                {data.allMarkdownRemark.edges.map((edge) =>(
                    <div class="blog-post">
                        <Img fluid={edge.node.frontmatter.featuredImage.childImageSharp.fluid} />
                        <div class="meta">
                                <h3>
                                {dayMonth(edge.node.frontmatter.date)}
                                </h3>
                            <div class="title-date">
                                <h3>
                                    <a href={"/blog/" + edge.node.fields.slug}>{edge.node.frontmatter.title}</a>
                                </h3> 
                                <p>{edge.node.frontmatter.date}</p>  
                                <p>Author</p>  
                            </div>
                        </div>    
                        </div>
                ))}
           
            </div>
            <div class="blog-pad"></div>
        </div>
    )
}

【讨论】：