时间戳

首页 > 解决方案 > 客户端 graphQL 排序 - 可以添加一个按钮，将 graphql 查询排序从 ASC 反转为 DESC？

sorting - 客户端 graphQL 排序 - 可以添加一个按钮，将 graphql 查询排序从 ASC 反转为 DESC？

问题描述

我正在使用内置了 graphql 的 gatsby.js，并且正在根据一个相当大的数据集（1600 个带有子字段的项目）构建一个站点。我的索引页按字母顺序排序，我真的很想将 AZ（现有）的按钮排序功能添加到 ZA，并按年份和难度排序。在浏览所有教程和文档时，我一直在摸不着头脑，到目前为止，我什至不确定我想要的是否可行。

理想情况下，应该有三个按钮。一个用于AZ / ZA，一个用于难度（从高到低/从低到高）和一个用于年份（从第一个到最后/最后到第一个）。

是否可以添加客户端按钮来交换服务器端代码的查询排序？

现有查询

 query {
    allMarkdownRemark(
      limit: 2000
      sort: { fields: [frontmatter___title], order: ASC }
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            categories
            askedHistYear1
            askedHistPercent1
          }
        }
      }
    }
  }

标签： sortingbuttongraphqlfilteringgatsby

解决方案

是否可以添加客户端按钮来交换服务器端代码的查询排序？

您在这里有一个误解：GraphQL 并不是真正的“服务器端代码”，因为没有服务器在后台运行。查询在构建时执行。因此，您所要求的是不可能的。您无法在客户端更改 GraphQL 查询。

您可以使用普通的 React 代码在客户端进行过滤/排序，因为 Gatsby只是一个普通的 React 应用程序（由于浏览器中的再水化）。

推荐阅读