在 Gatsby + JS-Search 中延迟加载博客文章？

Question

我正在使用js-search 在我的 gatsby 网站中搜索一些博客文章。我一直在关注this tutorial here。

const path = require("path")
const axios = require("axios")
exports.createPages = ({ actions }) => {
  const { createPage } = actions
  return new Promise((resolve, reject) => {
    axios
      .get("https://bvaughn.github.io/js-search/books.json")
      .then(result => {
        const { data } = result
        /**
         * creates a dynamic page with the data received
         * injects the data into the context object alongside with some options
         * to configure js-search
         */
        createPage({
          path: "/search",
          component: path.resolve(`./src/templates/ClientSearchTemplate.js`),
          context: {
            bookData: {
              allBooks: data.books,
              options: {
                indexStrategy: "Prefix match",
                searchSanitizer: "Lower Case",
                TitleIndex: true,
                AuthorIndex: true,
                SearchByTerm: true,
              },
            },
          },
        })
        resolve()
      })
      .catch(err => {
        console.log("====================================")
        console.log(`error creating Page:${err}`)
        console.log("====================================")
        reject(new Error(`error on page creation:\n${err}`))
      })
  })
}

现在，如果我从该 axios 请求中获取一个非常大的数据集，页面上将显示许多博客文章。有没有办法让我在这里为这些博客文章设置延迟加载，同时仍然能够通过 gatsby 搜索所有这些文章？或者至少只是延迟加载我返回的图像（我将返回一个指向 JSON 中图像的链接）？

Answer 1

我认为解决您的问题的最佳方法是以编程方式进行。您通过 ClientSearchTemplate 组件中的道具拥有所有书籍。只需在内部编写带有状态的逻辑，记住页面和页面上的项目数，在页面之间移动时对一些书籍进行切片。