Как я могу выполнить произвольную / динамическую c сортировку в Gatsby на основе параметра queryString? - PullRequest
Новая
       134

Как я могу выполнить произвольную / динамическую c сортировку в Gatsby на основе параметра queryString?

0 голосов
/ 06 августа 2020

У меня есть простой сайт, который использует Gatsby w / Netlify.

На данный момент «содержание» сайта минимально, поэтому я сохраняю его в файле JSON и генерирую страницы / списки из этого файла.

Основная цель сайта - показать список файлов, доступных для загрузки. По мере того, как список становился длиннее, я реализовал следующий код для обработки нумерации страниц, он работает. 

  const array_chunks = (array, chunk_size) =>
    Array(Math.ceil(array.length / chunk_size))
      .fill()
      .map((_, index) => index * chunk_size)
      .map(begin => array.slice(begin, begin + chunk_size))
  // const pages = array_chunks(edges.sort(customSort), pageSize)
  const pages = array_chunks(edges, pageSize)
  console.dir(pages)

  const handlePageChange = (event, data) => {
    setPage(data.activePage)
  }

  return (
    <div>
      <Table celled striped unstackable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell singleLine>Report Name</Table.HeaderCell>
            <Table.HeaderCell singleLine>Released</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {pages[page - 1].map(({ node }) => {
            let countryName = node.country.toString().toLowerCase()
            return (
              <Table.Row key={node.id}>
                <Table.Cell>
                  <CountryIcon />
                  {node.name}&nbsp;
                  <DownloadLink url={node.reportUrl} external={node.external} />
                </Table.Cell>
                <Table.Cell>{node.date}</Table.Cell>
              </Table.Row>
            )
          })}
        </Table.Body>
      </Table>
      <Pagination
        boundaryRange={0}
        defaultActivePage={1}
        ellipsisItem={null}
        firstItem={null}
        lastItem={null}
        siblingRange={1}
        totalPages={pages.length}
        onPageChange={handlePageChange}
      />
    </div>
  )
}

Иногда мы направляем людей на сайт, и я хочу, чтобы один из отчетов отображался вверху списка, вместо порядка по умолчанию. Я реализовал подобную пользовательскую функцию сортировки и применил ее к переменной pages, как видно из закомментированной строки выше. 

  const customSort = (a, b) => {
    if (a.node.name.includes(reportName)) return -1
    return 0
  }

Я использовал методы .includes и startsWith потому что иногда есть пара отчетов с последовательным префиксом, который я хочу вывести наверх. Затем я могу зайти на сайт, например, mysite.com/?reportName=myReportPrefix, и все работает. После того, как я развернулся в Netlify, все пошло наперекосяк, и я подозреваю, что это потому, что он генерирует сайт статически, и это разрушает мою пользовательскую функцию сортировки, но при локальной разработке она работала нормально, потому что (предположительно?) Это горячая перезагрузка и страница имеет доступ к запрашиваемым данным.

Есть ли способ реализовать эту функциональность в производственной среде? Мне нужно выяснить, как заставить Гэтсби генерировать страницу stati c для каждого возможного критерия сортировки? Есть какой-нибудь «правильный» способ сделать это?

1 Ответ

0 голосов
/ 12 августа 2020

Решил.

Несколько проблем. 1, мне пришлось привести array.slice(begin, begin + chunk_size)) к числам вроде array.slice(begin, Number(begin) + Number(chunk_size))), и я переместил pages в переменную состояния и применил сортировку в useEffect.

...