Сортировка graphQL на стороне клиента. Можно ли добавить кнопку, которая переворачивает сортировку запроса graphql из ASC в DESC?

Question

Я работаю с gatsby.js, в который встроен graphql, и строю сайт из набора данных приличного размера (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
          }
        }
      }
    }
  }

Answer 1

Можно ли добавить кнопки на стороне клиента, чтобы поменять местами сортировку запросов для кода на стороне сервера?

Здесь у вас неправильное представление: GraphQL на самом деле не "код на стороне сервера", потому чтони один сервер не работает в фоновом режиме.Запросы выполняются во время сборки.Следовательно, то, что вы просите, невозможно.Вы не можете изменять запросы GraphQL на клиенте.

Вы можете выполнять фильтрацию / сортировку на стороне клиента с помощью обычного кода React, поскольку Gatsby является просто обычным приложением React (из-заповторное увлажнение в браузере).

Answer 2

Так что я потратил некоторое время на это, и код там на 100% (мне нужно добавить ссылки на каждую страницу md), но вот что я сделал.Сортировка кода с помощью обычной html-сортировки делает свое дело, если вы не возражаете прыгать через некоторые скачки состояний, если вы выполняли отображение границ, как я.16 часов хорошо потрачены, прежде чем я наконец нашел решение.

Если таблица материалов не является моим окончательным решением, я вернусь и отправлю новый ответ.Я хочу, чтобы это было как можно больше ориентировано на будущее.

import React, { Component } from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/layout"
import ReactDOM from "react-dom"
import MaterialTable from "material-table"

class App extends Component {
  render() {
    const { data } = this.props
    const posts = data.allMarkdownRemark.edges
    return (
      <Layout>
        <div style={{ maxWidth: "100%" }}>
          <MaterialTable
            columns={[
              { title: "Title", field: "title" },
              { title: "Difficulty", field: "difficulty" },
              { title: "Year", field: "year" },
            ]}
            data={posts.map(({ node }) => {
              return {
                key: `${node.fields.slug}`,
                title: `${node.frontmatter.title}`,
                difficulty: `${node.frontmatter.askedHistPercent1}%`,
                year: `${node.frontmatter.askedHistYear1}`,
              }
            })}
            // onRowClick={<Link to={key} />}
            title=" "
            options={{ paging: false }}
          />
        </div>
      </Layout>
    )
  }
}
export default App
export const basicQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      filter: { frontmatter: { categories: { eq: "Statistics" } } }
      sort: { fields: [frontmatter___title], order: ASC }
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            categories
            askedHistPercent1
            askedHistYear1
          }
        }
      }
    }
  }
`