如何根据 queryString 参数在 Gatsby 中执行 custom/dynamic 排序？

Question

我有一个使用 Gatsby 和 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 为每个可能的排序标准生成一个静态页面？有什么“正确”的方法吗？

Answer 1

解决了这个问题。

几个问题。 1，我不得不将 array.slice(begin, begin + chunk_size)) 强制转换为 array.slice(begin, Number(begin) + Number(chunk_size))) 之类的数字，并将 pages 移动到状态变量并在 useEffect.

中应用排序

如何根据 queryString 参数在 Gatsby 中执行 custom/dynamic 排序？

How can I perform a custom/dynamic sort in Gatsby based on a queryString param?

gatsby

netlify