时间戳

首页 > 解决方案 > 如何根据 queryString 参数在 Gatsby 中执行自定义/动态排序？

gatsby - 如何根据 queryString 参数在 Gatsby 中执行自定义/动态排序？

问题描述

我有一个使用 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，一切都变了，我怀疑这是因为它静态生成站点，这破坏了我的自定义排序功能 - 但在本地开发时它工作正常，因为（大概？）它是热重载并且页面可以访问到查询的数据。

有没有办法在生产中实现这个功能？我是否需要弄清楚如何让 Gatsby 为每个可能的排序标准生成一个静态页面？任何“正确”的方式来做到这一点？

标签： gatsbynetlify

解决方案

解决了这个问题。

几个问题。1，我不得不强制array.slice(begin, begin + chunk_size))使用类似的数字，array.slice(begin, Number(begin) + Number(chunk_size)))然后我移动pages到一个状态变量并在useEffect.

推荐阅读