Отложенная загрузка сообщений в блоге в Gatsby JS-Search?

#javascript #reactjs #lazy-loading #gatsby #gatsby-image

#javascript #reactjs #отложенная загрузка #gatsby #gatsby-изображение

Вопрос:

Я использую js-search для поиска по некоторым сообщениям в блоге на моем сайте gatsby. Я следовал этому руководству здесь.

 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)?

1. Привет, я просто вижу этот вопрос, вы нашли какое-либо решение? Мне нужно будет реализовать что-то подобное для проекта, над которым я работаю, я думаю, что решение заключается в добавлении разбивки на страницы в результатах поиска, а затем отложенной загрузке их на стороне клиента. Если еще не поздно, я постараюсь это сделать. дайте мне знать

Ответ №1:

Я думаю, что лучший способ решить вашу проблему — сделать это программно. У вас есть все книги через props внутри вашего компонента ClientSearchTemplate. Просто напишите логику с состоянием внутри, запомните страницу и количество элементов на странице, нарежьте несколько книг при переходе со страницы на страницу.