I am using js-search
to search through some blog posts in my gatsby site. I have been following 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}`))
})
})
}
Now if I get back a very big dataset from that axios request, there will be many many blog posts shown on the page. Is there a way for me to setup lazy-loading here for these blog posts, while still being able to search through all of them via gatsby? Or at least just lazy load the images that I get back (I will get back a link to an image in the JSON)?
from Lazy Loading Blog Posts in Gatsby + JS-Search?
No comments:
Post a Comment