Filtering by dates in Gatsby and Contentful

倾然丶 夕夏残阳落幕 提交于 2020-01-04 15:10:20

问题


How can you filter by dates in Gatsby? The docs allude to lt and gt operators, I get errors when I try to use them.


回答1:


Filtering by date in Gatsby is potentially tricky. Many API's send dates in JSON as strings - in the ISO8601 format. That means that GraphQL will treat the dates as strings too. This is fine if you are happy filtering on string equality, but that's not usually how you want to filter on dates.

A common use case is to filter to dates that are in the past or future. In most situations, we would do some kind of less than or more than comparison with todays date. Unfortunately, this won't work for dates strings in GraphQL. The lt and gt operators only apply to numbers and won't work for strings.

Fortunately, there is an escape hatch - setFieldsOnGraphQLNodeType. This allows us to take a content node, and add our own fields with derived data in. We can take a datestring, and parse it to a timestamp - a number. With the date as a timestamp, graphql can do its thing and allow lt and gt filters.

Lets say we are writing a blog, and what to filter posts that are published in the past. We can add a publishedAt datetime field in our ContentModel, which will help our content authors publish things in the future. We can filter out the future posts until we transform publishedAt from a date string into a number.

Here's how that looks:

exports.setFieldsOnGraphQLNodeType = ({ type }) => {
  if (type.name === `ContentfulBlogPost`) {
    return {
      publishAtTimestamp: {
        type: GraphQLFloat,
        resolve: source => {
          return new Date(source.publishAt).getTime(); 
        }
     }
   };
  }

  // by default return empty object
  return {};
};

ContentfulBlogPost 's now have a new field publishedAtTimestamp which is a number, that means you can now filter on it with lt or gt

  query {
    allContentfulBlogPost(
      filter: { publishedAtTimestamp: { lt: $SOME_TIMESTAMP } }
    ) {
      edges {
        node {
          id
          ...otherFields
        }
      }
    }
  }


来源:https://stackoverflow.com/questions/54782808/filtering-by-dates-in-gatsby-and-contentful

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!