问题描述
我正在使用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中图像的链接)?
解决方法
我认为解决问题的最佳方法是以编程方式进行。您在ClientSearchTemplate组件内通过道具拥有所有书籍。只需编写内部状态的逻辑,记住页面和页面上的项目数,在逐页移动时切一些书即可。