React Gatsby Graph QL - 过滤站点地图的文章

     2023-03-08     63

关键词:

【中文标题】React Gatsby Graph QL - 过滤站点地图的文章【英文标题】:React Gatsby Graph QL - filter articles for sitemap 【发布时间】:2021-10-31 16:51:03 【问题描述】:

我使用 Flexiblocks 创建了一个 Gatsby 博客。问题是我想专门为Google News 创建一个站点地图,这将不同于博客的主站点地图。对于这个站点地图,我需要过滤过去两天内发布的文章。 我正在使用这个plugin

 allArticle(sort: order: DESC, fields: date, filter: date: WHAT_SHOULD_I_DO_HERE) 
    edges 
      node 
        date
        excerpt
        title
        link
        slug
      
    
  

任何帮助将不胜感激,谢谢。

更新

date: gte: "2021-08-27T13:11:30.443Z" 将过滤文章,但我如何动态获取此日期字符串?

【问题讨论】:

【参考方案1】:

Gatsby 在处理 GraphQL 范围内的日期时依赖于 momentjs。您只需要在查询范围内添加从函数返回的变量,例如:

const getTwoDaysAgo=()=> moment().subtract(2, "days");

在您的gatsby-config.js 中,您只需调用此函数即可:

要添加变量,您可以按照您的答案:Variables in graphQL queries

基本上,遵循以下语法:

grapqhl(
     `query getImages($fileName: String) 
      landscape: file(relativePath: eq: $fileName) 
        childImageSharp 
          fluid(maxWidth: 1000) 
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
           
         
       
     
    `,
    fileName: "knight.jpg"
   )

您可以添加自定义变量。在这种情况下,请注意查询包含在 graphql() 函数中。应用于你的情况,你可以试试:

plugins: [
    
        resolve: `gatsby-plugin-advanced-sitemap`,
        options: 
          query: graphql(
             ` 
              query allArticle(
               sort: 
                 order: DESC, fields: date
               , 
              filter: date: twoDaysAgo) 
              edges 
                node 
                  date
                  excerpt
                  title
                  link
                  slug
                
              
            `, twoDaysAgo: getTwoDaysAgo()
          )
      
    
 ]

注意:复制/粘贴时要小心,因为我可能会遗漏很多括号。

我不确定插件是否支持这种表示法,但应该支持。


日期:gte:“2021-08-27T13:11:30.443Z”

鉴于已编辑的问题,将流程和过滤器调整为 gte 参数。

【讨论】:

谢谢,我会试试这个并告诉你 我无法在 gastby-config.js 中使用它 :(

我的项目仍在使用 graph-i-ql 而不是 Playground

】我的项目仍在使用graph-i-ql而不是Playground【英文标题】:Myprojectisstillusinggraph-i-qlinsteadofplayground【发布时间】:2019-09-1117:04:59【问题描述】:如何使用Playground而不是graph-i-ql?gatsbydocs-usinggraphqlplayground我尝试了几种方法来加载Pla... 查看详情

AWS amplify Graph QL 按书名和作者姓名过滤

】AWSamplifyGraphQL按书名和作者姓名过滤【英文标题】:AWSamplifyGraphQLfilterbybooktitleandauthorname【发布时间】:2021-04-0619:16:58【问题描述】:AWSamplifyDynamoDBGraphQL按书名和作者姓名过滤我想按书名和作者姓名搜索书籍,但我的架构允许... 查看详情

如何在 Gatsby 中使用 React.lazy

】如何在Gatsby中使用React.lazy【英文标题】:HowtouseReact.lazyinGatsby【发布时间】:2020-11-1322:19:35【问题描述】:在Gatsby中使用React.lazy时,在制作production(gatsbybuild)时会出错,在Gatsby项目中使用React.lazy和suspense的最佳方法是什么【问... 查看详情

React / Gatsby - 根据屏幕大小渲染不同的组件

】React/Gatsby-根据屏幕大小渲染不同的组件【英文标题】:React/Gatsby-renderdifferentcomponentbasedonscreensize【发布时间】:2021-02-0721:09:32【问题描述】:(注意警告:我对React/GraphQL不是很熟悉,所以请放轻松)。我正在使用Gatsby构建博... 查看详情

gatsby-plugin-react-svg 导致太多递归错误

】gatsby-plugin-react-svg导致太多递归错误【英文标题】:gatsby-plugin-react-svgcausingtoomuchrecursionerror【发布时间】:2021-03-0308:56:44【问题描述】:我已经安装了gatsby-plugin-react-svg,但是当我更新gatsby-config文件时,它会导致“递归过多”... 查看详情

React-slick 与 gatsby-plugin-image

】React-slick与gatsby-plugin-image【英文标题】:React-slickwithgatsby-plugin-image【发布时间】:2021-06-0818:40:50【问题描述】:我正在尝试将React-slick与gatsby-plugin图像一起使用,并且我有这样的页面设置。importReactfrom"react";importgraphqlfrom"gatsby... 查看详情

Gatsby React 查询 GraphQL

】GatsbyReact查询GraphQL【英文标题】:GatsbyReactqueryGraphQL【发布时间】:2020-03-2304:16:28【问题描述】:我正在尝试帮助正在构建一些结合Gatsby和Strapi的网站的朋友。我对两者都没有经验......它是用React制作的前端,它用GraphQL调用后... 查看详情

将自定义类/样式传递给 Gatsby (React) 中的样式化组件

】将自定义类/样式传递给Gatsby(React)中的样式化组件【英文标题】:Passingacustomclass/styletoastyled-componentinGatsby(React)【发布时间】:2020-02-0919:15:29【问题描述】:我为我的gatsby项目创建了以下样式组件。importReactfrom"react"importstyled,css... 查看详情

GraphQL - Gatsby.js- React 组件。 - 如何查询变量/参数?

】GraphQL-Gatsby.js-React组件。-如何查询变量/参数?【英文标题】:GraphQL-Gatsby.js-Reactcomponent.-Howtoquerywithvariables/arguments?【发布时间】:2020-06-2013:01:53【问题描述】:我有一个需要查询数据的React组件。我想将参数/变量传递给查询。... 查看详情

React/Gatsby:使用每行交替列数的 CSS 网格

】React/Gatsby:使用每行交替列数的CSS网格【英文标题】:React/Gatsby:UsingCSSgridwithalternatingnumberofcolumnsineachrow【发布时间】:2020-07-2408:35:14【问题描述】:我正在尝试创建一个交替每行中的列数的网格布局。因此,例如,第一行将... 查看详情

React Gatsbyjs 根据纵横比向 gatsby-image 添加类

】ReactGatsbyjs根据纵横比向gatsby-image添加类【英文标题】:ReactGatsbyjsaddclasstogatsby-imagebasedonaspectratio【发布时间】:2019-11-1122:27:19【问题描述】:gatsby-image使用gatsby-image-wrapperdiv包装每个图像,该div填充100%的可用视口宽度。这个包... 查看详情

如何使用 react 或 Gatsby(whitout 窗口 || 文档)在 url 中处理(获取、设置)查询字符串

】如何使用react或Gatsby(whitout窗口||文档)在url中处理(获取、设置)查询字符串【英文标题】:Howtowork(get,set)withquerystringinaurlusingreactorGatsby(whitoutwindow||document)【发布时间】:2021-12-2703:15:59【问题描述】:如何使用React或Gatsby获... 查看详情

标题组件根据 React / Gatsby / Styled-components 中的背景更改文本颜色

】标题组件根据React/Gatsby/Styled-components中的背景更改文本颜色【英文标题】:HeadingComponentchangetextcolorbasedonthebackgroundinReact/Gatsby/Styled-components【发布时间】:2020-05-2916:05:54【问题描述】:大家好,我希望我能得到一些帮助。我有... 查看详情

gatsby、react-static、netlify、netlify cms 和 contentful 如何关联或一起使用?

】gatsby、react-static、netlify、netlifycms和contentful如何关联或一起使用?【英文标题】:Howaregatsby,react-static,netlify,netlifycms,andcontentfulrelatedorusedtogether?【发布时间】:2019-07-1420:58:56【问题描述】:我正在尝试更多地了解静态网站及其... 查看详情

React w Gatsby:为啥我的字体文件有时会下载两次

】ReactwGatsby:为啥我的字体文件有时会下载两次【英文标题】:ReactwGatsby:WhyisthatmyfontfileisdownloadedtwicesometimesReactwGatsby:为什么我的字体文件有时会下载两次【发布时间】:2020-01-1005:45:38【问题描述】:我正在使用Gatsby和React开发... 查看详情

您可以将 Gatsby 和 Next js 用于单个 React js 网站吗?

】您可以将Gatsby和Nextjs用于单个Reactjs网站吗?【英文标题】:CanyouusebothGatsbyandNextjsforasinglereactjswebsite?【发布时间】:2022-01-1016:25:30【问题描述】:我很好奇这是否可能,如果可能的话,建议同时使用Gatsby和Nextjs。从初学者的角... 查看详情

如何使用 Github 工作流程轻松地将 React 和 Gatsby 部署到 github 页面?

】如何使用Github工作流程轻松地将React和Gatsby部署到github页面?【英文标题】:HowcanIeasilydeployReactandGastbytogithub-pagesusingGithub\'sworflow?【发布时间】:2021-10-2005:02:55【问题描述】:我正在尝试创建一个工作流,因此每当我将代码推... 查看详情

如何创建工作流以将 React & Gatsby 应用程序部署到 Github 页面?

】如何创建工作流以将React&Gatsby应用程序部署到Github页面?【英文标题】:HowtocreateaworkflowtodeployonaReact&GatsbyapptoGithubpages?【发布时间】:2021-10-2003:52:01【问题描述】:我创建了一个工作流程,每当我将某些内容推送到我的r... 查看详情